/* =========================================================
   SABIN BACKOFFICE — DESIGN TOKENS
   Brand: Sabin Diagnóstico e Saúde
   ========================================================= */

:root {
  /* ---------- BRAND COLORS ---------- */
  --sabin-red:        #E51518;   /* PMS 185 C — primary action / brand */
  --sabin-red-700:    #B81014;
  --sabin-red-800:    #8E0C0F;
  --sabin-red-100:    #FDE4E4;
  --sabin-red-50:     #FCEFEF;

  --sabin-bege:       #D0CFC4;   /* Warm Gray 2 C — secondary surface */
  --sabin-bege-soft:  #DEDDD3;
  --sabin-bege-deep:  #BAB9AD;

  --sabin-offwhite:   #EEEDE7;   /* Warm Gray 1 C — app background */
  --sabin-offwhite-2: #F5F4EF;

  --sabin-hue:        #B08E8F;   /* PMS 4995 C — soft mauve, accents */
  --sabin-hue-soft:   #D9C9C9;

  --sabin-gray-med:   #8B8B8B;   /* Cool Gray 7 C */
  --sabin-gray-dark:  #4C4C4C;   /* Cool Gray 11 C */

  /* ---------- NEUTRAL SCALE (warm) ---------- */
  --neutral-00: #FFFFFF;
  --neutral-50: #F8F7F3;
  --neutral-100:#EEEDE7;
  --neutral-200:#E2E1D9;
  --neutral-300:#CFCEC4;
  --neutral-400:#A8A79E;
  --neutral-500:#8B8B85;
  --neutral-600:#6B6B66;
  --neutral-700:#4C4C48;
  --neutral-800:#2E2E2C;
  --neutral-900:#1A1A19;

  /* ---------- SEMANTIC ---------- */
  --color-bg-app:       var(--sabin-offwhite);
  --color-bg-surface:   var(--neutral-00);
  --color-bg-raised:    var(--neutral-00);
  --color-bg-sunken:    var(--sabin-offwhite-2);
  --color-bg-inverse:   var(--neutral-900);

  --color-border:        #E2E1D9;
  --color-border-strong: #CFCEC4;
  --color-divider:       #EAE9E1;

  --color-text:          var(--neutral-900);
  --color-text-muted:    var(--neutral-600);
  --color-text-subtle:   var(--neutral-500);
  --color-text-inverse:  var(--neutral-00);
  --color-text-onbrand:  var(--neutral-00);
  --color-text-link:     var(--sabin-red);

  --color-action:        var(--sabin-red);
  --color-action-hover:  var(--sabin-red-700);
  --color-action-active: var(--sabin-red-800);

  /* Status — calibrated to live next to Sabin red */
  --color-success:       #1F8A5B;
  --color-success-bg:    #E4F3EC;
  --color-warning:       #B8740A;
  --color-warning-bg:    #FBF0DC;
  --color-danger:        var(--sabin-red);
  --color-danger-bg:     var(--sabin-red-50);
  --color-info:          #2A6FDB;
  --color-info-bg:       #E5EEFB;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-xbold:   800;

  /* Type scale (1.125 modular + display) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-snugger: -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-mega:    0.08em;

  /* ---------- SPACING (4pt) ---------- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;

  /* ---------- RADIUS ---------- */
  --r-xs:    4px;
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    14px;     /* default for cards / inputs */
  --r-xl:    20px;
  --r-2xl:   28px;     /* hero cards (Sabin signature) */
  --r-3xl:   40px;
  --r-pill:  9999px;   /* chips, tags, hero CTAs */

  /* ---------- SHADOWS (warm, subtle) ---------- */
  --shadow-xs: 0 1px 2px rgba(46, 46, 44, 0.04);
  --shadow-sm: 0 1px 3px rgba(46, 46, 44, 0.06), 0 1px 2px rgba(46, 46, 44, 0.04);
  --shadow-md: 0 4px 10px rgba(46, 46, 44, 0.06), 0 2px 4px rgba(46, 46, 44, 0.04);
  --shadow-lg: 0 12px 28px rgba(46, 46, 44, 0.08), 0 4px 10px rgba(46, 46, 44, 0.05);
  --shadow-xl: 0 24px 56px rgba(46, 46, 44, 0.14), 0 8px 16px rgba(46, 46, 44, 0.06);

  --ring-focus: 0 0 0 3px rgba(229, 21, 24, 0.22);
  --ring-focus-neutral: 0 0 0 3px rgba(76, 76, 76, 0.16);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  140ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;

  /* ---------- LAYOUT ---------- */
  --layout-sidebar-w: 248px;
  --layout-sidebar-w-collapsed: 64px;
  --layout-topbar-h: 64px;
  --layout-max-w: 1440px;
  --layout-content-px: 32px;
}

/* =========================================================
   BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--sabin-red); color: white; }

/* Scrollbar — discreet, warm */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); background-clip: padding-box; border: 2px solid transparent;}