/* =========================================================
   OPUSMED · DESIGN TOKENS · v1.0
   Convenção:  --<categoria>-<nome>-<variante>
   Ex.: --color-primary-500, --space-4, --radius-md
   ========================================================= */

:root {
  /* ---------- COR · PRIMÁRIA (azul institucional saúde) --------
     Base da marca = #2477B8 (escala corrigida em 2026-05-21).
     A escala anterior usava #1E4FA3, que nunca foi a cor real
     usada nas implementações — ver CHANGELOG no fim do arquivo. */
  --color-primary-50:  #EAF2FA;
  --color-primary-100: #D4E4F1;
  --color-primary-200: #ABC9E3;
  --color-primary-300: #7FACD2;
  --color-primary-400: #4F90C5;
  --color-primary-500: #2477B8;   /* base institucional */
  --color-primary-600: #1F5A93;
  --color-primary-700: #1B3D6F;
  --color-primary-800: #143059;
  --color-primary-900: #0E2444;
  --color-primary-950: #081629;

  /* ---------- COR · SECUNDÁRIA (verde-água/saúde do logo) ----- */
  --color-secondary-50:  #E6F7F4;
  --color-secondary-100: #C4ECE5;
  --color-secondary-200: #91DBCE;
  --color-secondary-300: #5FCABA;
  --color-secondary-400: #38BAA8;
  --color-secondary-500: #1FA391;   /* base */
  --color-secondary-600: #168878;
  --color-secondary-700: #106B5E;
  --color-secondary-800: #0B5145;
  --color-secondary-900: #073A30;

  /* ---------- COR · NEUTROS (frios, levemente azulados) ------- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-25:  #FBFCFD;   /* canvas */
  --color-neutral-50:  #F6F8FB;   /* page bg */
  --color-neutral-100: #EEF2F7;
  --color-neutral-200: #E2E8F0;   /* hairline */
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;

  /* ---------- COR · SEMÂNTICAS -------------------------------- */
  --color-success-50:  #ECFDF5;
  --color-success-100: #D1FADF;
  --color-success-500: #16A34A;
  --color-success-600: #15803D;
  --color-success-700: #166534;

  --color-warning-50:  #FFFBEB;
  --color-warning-100: #FEF3C7;
  --color-warning-500: #D97706;
  --color-warning-600: #B45309;
  --color-warning-700: #92400E;

  --color-danger-50:   #FEF2F2;
  --color-danger-100:  #FEE2E2;
  --color-danger-500:  #DC2626;
  --color-danger-600:  #B91C1C;
  --color-danger-700:  #991B1B;

  --color-info-50:     #EFF6FF;
  --color-info-100:    #DBEAFE;
  --color-info-500:    #2563EB;
  --color-info-600:    #1D4ED8;
  --color-info-700:    #1E40AF;

  /* ---------- ALIAS · superfícies & texto --------------------- */
  --surface-canvas:     var(--color-neutral-50);
  --surface-default:    var(--color-neutral-0);
  --surface-subtle:     var(--color-neutral-25);
  --surface-muted:      var(--color-neutral-100);
  --surface-inverse:    var(--color-primary-900);

  --border-subtle:      var(--color-neutral-200);
  --border-default:     var(--color-neutral-300);
  --border-strong:      var(--color-neutral-400);
  --border-focus:       var(--color-primary-500);

  --text-primary:       var(--color-neutral-900);
  --text-secondary:     var(--color-neutral-600);
  --text-tertiary:      var(--color-neutral-500);
  --text-disabled:      var(--color-neutral-400);
  --text-inverse:       var(--color-neutral-0);
  --text-link:          var(--color-primary-600);
  --text-on-primary:    var(--color-neutral-0);

  /* ---------- TIPOGRAFIA -------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* escala (1.125 minor third) */
  --text-2xs:   11px;   /* micro labels */
  --text-xs:    12px;   /* caption, metadados */
  --text-sm:    13px;   /* dense table cells, inputs compactos */
  --text-md:    14px;   /* body padrão */
  --text-base:  15px;   /* body confortável */
  --text-lg:    16px;   /* destaque */
  --text-xl:    18px;   /* h6 */
  --text-2xl:   20px;   /* h5 */
  --text-3xl:   24px;   /* h4 */
  --text-4xl:   30px;   /* h3 */
  --text-5xl:   36px;   /* h2 */
  --text-6xl:   44px;   /* h1 */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  /* ---------- ESPAÇAMENTO (múltiplos de 4px) ------------------ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ---------- RADIUS ------------------------------------------ */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;    /* inputs, chips */
  --radius-lg:   8px;    /* botões, cards */
  --radius-xl:   12px;   /* modais, drawers */
  --radius-2xl:  16px;
  --radius-pill: 999px;

  /* ---------- BORDAS ------------------------------------------ */
  --border-width-hairline: 1px;
  --border-width-strong:   2px;

  /* ---------- ELEVAÇÃO (sombras suaves, low-saturation) ------- */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px 0 rgba(15, 23, 42, .05);
  --shadow-sm:    0 1px 3px 0 rgba(15, 23, 42, .06), 0 1px 2px 0 rgba(15, 23, 42, .04);
  --shadow-card:  0 1px 2px 0 rgba(15, 23, 42, .04), 0 0 0 1px rgba(15, 23, 42, .04);
  --shadow-md:    0 4px 8px -2px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .04);
  --shadow-lg:    0 12px 24px -8px rgba(15, 23, 42, .12), 0 4px 8px -4px rgba(15, 23, 42, .06);
  --shadow-xl:    0 24px 48px -12px rgba(15, 23, 42, .18);
  --shadow-focus: 0 0 0 3px rgba(36, 119, 184, .22);
  --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, .22);

  /* ---------- MOTION ------------------------------------------ */
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    200ms;
  --duration-slow:    320ms;

  --easing-standard:  cubic-bezier(.2, 0, 0, 1);
  --easing-emphasized:cubic-bezier(.2, 0, 0, 1.2);
  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
  --easing-accelerate:cubic-bezier(.3, 0, 1, 1);

  /* ---------- LAYOUT ------------------------------------------ */
  --layout-sidebar-w:        252px;
  --layout-sidebar-w-min:    72px;
  --layout-topbar-h:         56px;
  --layout-content-max:      1440px;
  --layout-gutter:           var(--space-6);

  /* ---------- DENSIDADE (default = confortável) --------------- */
  --control-h:        36px;
  --control-h-sm:     30px;
  --control-h-lg:     44px;
  --control-px:       var(--space-3);
  --row-h:            44px;
  --row-px:           var(--space-4);
  --field-gap:        var(--space-4);

  /* z-index escala */
  --z-base:    1;
  --z-sticky:  100;
  --z-drawer:  900;
  --z-modal:   1000;
  --z-toast:   1100;
  --z-tooltip: 1200;
}

/* Densidade compacta — formulários longos, tabelas com muitas linhas */
[data-density="compact"] {
  --control-h:    30px;
  --control-h-sm: 26px;
  --control-h-lg: 36px;
  --control-px:   var(--space-2);
  --row-h:        34px;
  --row-px:       var(--space-3);
  --field-gap:    var(--space-2);
}

/* =========================================================
   SNIPPET CANÔNICO · PÁGINAS STANDALONE
   ---------------------------------------------------------
   Páginas HTML servidas fora do SPA (reset_password.html,
   clientes.html, clientes-st.html, aso-legacy, etc.) não
   conseguem importar este arquivo facilmente. Em vez de cada
   página inventar nomes próprios (--primary, --p500, --p700…),
   COPIE o bloco abaixo para o <style> da página. Use SEMPRE
   os mesmos nomes de variável do DS, para que a marca mude
   em um lugar só.

:root{
  --color-primary-50:#EAF2FA; --color-primary-100:#D4E4F1;
  --color-primary-200:#ABC9E3; --color-primary-500:#2477B8;
  --color-primary-600:#1F5A93; --color-primary-700:#1B3D6F;
  --color-primary-900:#0E2444;
  --color-neutral-0:#FFFFFF; --color-neutral-50:#F6F8FB;
  --color-neutral-200:#E2E8F0; --color-neutral-300:#CBD5E1;
  --color-neutral-500:#64748B; --color-neutral-600:#475569;
  --color-neutral-900:#0F172A;
  --color-success-500:#16A34A; --color-success-50:#ECFDF5;
  --color-warning-500:#D97706; --color-danger-500:#DC2626;
  --color-danger-50:#FEF2F2;
  --surface-canvas:var(--color-neutral-50);
  --surface-default:var(--color-neutral-0);
  --border-subtle:var(--color-neutral-200);
  --text-primary:var(--color-neutral-900);
  --text-secondary:var(--color-neutral-600);
  --text-tertiary:var(--color-neutral-500);
  --radius-md:6px; --radius-lg:8px; --radius-xl:12px;
  --shadow-focus:0 0 0 3px rgba(36,119,184,.22);
  --font-sans:"Inter",system-ui,sans-serif;
}
   ========================================================= */

/* =========================================================
   CHANGELOG
   ---------------------------------------------------------
   2026-05-21 · Escala primary corrigida de #1E4FA3 → #2477B8.
     A escala antiga (azul-marinho #1E4FA3) nunca foi a cor
     real da marca; todas as telas em produção usavam #2477B8.
     Toda a escala 50→950 foi reinterpolada a partir de
     #2477B8, ancorada nos valores reais já usados:
       primary-50  = #EAF2FA   (reset_password.html)
       primary-500 = #2477B8   (todas as telas)
       primary-700 = #1B3D6F   (clientes.html, CLAUDE.md)
       primary-900 = #0E2444   (reset_password.html)
     --shadow-focus também atualizado para o novo RGB.
   ========================================================= */