/* =========================================================================
   Anest-Review Design System — Color & Type Foundations
   Rebranded 2026 — maintains brand heritage (deep navy blue, technical feel)
   while modernizing with a slightly warmer, richer blue scale and softer UI.
   ========================================================================= */

/* Fonts loaded via <link> in index.html for parallel download */

:root {
  /* =========================================================================
     COLOR SYSTEM — Anest-Review Navy
     ---------------------------------------------------------------------
     Brand anchor is a deep, authoritative navy (#132669 / #17326B).
     Original palette: #126699, #1B5CB4, #264D76, #356894, #438AB... (cool blues)
     Rebrand: slightly richer, warmer navy + cleaner cyan accent.
     ======================================================================= */

  /* ——— Primary: Anest Navy ——— */
  --ar-navy-950: #0A1436;   /* near-black navy, reserved for deep backgrounds */
  --ar-navy-900: #0F1D4A;   /* deepest brand navy (display surfaces) */
  --ar-navy-800: #13265C;   /* primary brand navy — logo color */
  --ar-navy-700: #1A326E;   /* hover state for primary */
  --ar-navy-600: #254089;   /* active, links on light bg */
  --ar-navy-500: #3454A8;   /* muted navy */
  --ar-navy-400: #5B7BC4;   /* decorative, illustrations */
  --ar-navy-300: #8AA3D6;   /* subtle accents */
  --ar-navy-200: #BFCEE8;   /* soft backgrounds */
  --ar-navy-100: #E2EAF5;   /* tint backgrounds */
  --ar-navy-50:  #F3F6FC;   /* page tint */

  /* ——— Accent: Cyan (from the symbol gradient) ——— */
  --ar-cyan-900: #0B4E7A;
  --ar-cyan-700: #0F77B3;
  --ar-cyan-500: #2AA6E0;   /* signature highlight cyan */
  --ar-cyan-400: #54BEEA;
  --ar-cyan-300: #8FD5F1;
  --ar-cyan-200: #BFE6F7;
  --ar-cyan-100: #E1F2FB;

  /* ——— Neutrals: warm-cool mix, calibrated for medical context ——— */
  --ar-ink-1000: #050812;
  --ar-ink-900:  #0C1020;
  --ar-ink-800:  #161B2E;
  --ar-ink-700:  #242A42;
  --ar-ink-600:  #3A4159;
  --ar-ink-500:  #5A6278;
  --ar-ink-400:  #828AA0;
  --ar-ink-300:  #AFB5C6;
  --ar-ink-200:  #D6DAE3;
  --ar-ink-150:  #E6E9EF;
  --ar-ink-100:  #F1F3F7;
  --ar-ink-50:   #F8F9FC;
  --ar-white:    #FFFFFF;

  /* ——— Semantic ——— */
  --ar-success: #1F9D6F;
  --ar-success-soft: #E0F5EC;
  --ar-warning: #E8A317;
  --ar-warning-soft: #FBEFCE;
  --ar-danger:  #D64545;
  --ar-danger-soft: #FBE4E4;
  --ar-info:    var(--ar-cyan-500);
  --ar-info-soft: var(--ar-cyan-100);

  /* ——— Brand gradient (hero, splashes, logo background matte) ——— */
  --ar-grad-hero: linear-gradient(135deg, #0A1436 0%, #13265C 45%, #1A4887 100%);
  --ar-grad-metal: linear-gradient(180deg, #E6EEF7 0%, #B8C7DC 50%, #5F7AA3 100%);
  --ar-grad-cyan: linear-gradient(135deg, #2AA6E0 0%, #0F77B3 100%);
  --ar-grad-deep: radial-gradient(ellipse at top, #1A326E 0%, #0A1436 70%);

  /* ——— Semantic foreground/background aliases ——— */
  --fg-1: var(--ar-ink-900);          /* headings, primary text */
  --fg-2: var(--ar-ink-700);          /* body */
  --fg-3: var(--ar-ink-500);          /* secondary */
  --fg-4: var(--ar-ink-400);          /* tertiary, captions */
  --fg-on-dark: var(--ar-white);
  --fg-on-dark-2: #C8D0E4;
  --fg-brand: var(--ar-navy-800);
  --fg-link: var(--ar-navy-600);

  --bg-page: var(--ar-white);
  --bg-page-alt: var(--ar-ink-50);
  --bg-surface: var(--ar-white);
  --bg-sunken: var(--ar-ink-100);
  --bg-inverse: var(--ar-navy-900);

  --border-1: var(--ar-ink-200);
  --border-2: var(--ar-ink-150);
  --border-strong: var(--ar-ink-300);
  --border-brand: var(--ar-navy-800);

  /* =========================================================================
     TYPOGRAPHY
     ---------------------------------------------------------------------
     Títulos:  Orbitron  (geometric, technical, authoritative — kept from brand)
     Apoio:    Exo 2     (humanist body, kept from brand)
     System:  Inter     (UI labels, data-dense surfaces — optional)
     ======================================================================= */
  --font-display: 'Orbitron', 'Exo 2', system-ui, sans-serif;
  --font-body:    'Exo 2', 'Inter', system-ui, sans-serif;
  --font-ui:      'Inter', 'Exo 2', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Type scale — desktop (per Tipografia Desktop spec) */
  --fs-h1: 64px;   --lh-h1: 1.20;  --ls-h1: -0.01em;
  --fs-h2: 48px;   --lh-h2: 1.20;
  --fs-h3: 32px;   --lh-h3: 1.20;
  --fs-h4: 24px;   --lh-h4: 1.20;
  --fs-sub-1: 20px;  --lh-sub-1: 1.20;
  --fs-sub-2: 18px;  --lh-sub-2: 1.20;
  --fs-body-1: 16px; --lh-body-1: 1.60;
  --fs-body-2: 14px; --lh-body-2: 1.60;
  --fs-label-1: 14px; --lh-label-1: 1.20;
  --fs-label-2: 12px; --lh-label-2: 1.20;
  --fs-button: 16px;  --lh-button: 1.20;

  /* Mobile */
  --fs-h1-m: 36px;
  --fs-h2-m: 30px;
  --fs-h3-m: 24px;
  --fs-h4-m: 20px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* =========================================================================
     SPACING, RADII, SHADOWS, MOTION
     ======================================================================= */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(10, 20, 54, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 20, 54, 0.08);
  --shadow-md: 0 6px 16px -4px rgba(10, 20, 54, 0.12), 0 2px 4px rgba(10, 20, 54, 0.06);
  --shadow-lg: 0 18px 40px -12px rgba(10, 20, 54, 0.22), 0 4px 8px rgba(10, 20, 54, 0.08);
  --shadow-xl: 0 32px 64px -16px rgba(10, 20, 54, 0.28);
  --shadow-brand: 0 12px 32px -8px rgba(19, 38, 92, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-crisp: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* =========================================================================
   SEMANTIC TYPE CLASSES — use these on HTML elements directly
   ========================================================================= */

.h1, h1.ar {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
}
.h2, h2.ar {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
}
.h3, h3.ar {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
}
.h4, h4.ar {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}
.sub-1 { font-family: var(--font-body); font-size: var(--fs-sub-1); line-height: var(--lh-sub-1); font-weight: var(--fw-semibold); }
.sub-2 { font-family: var(--font-body); font-size: var(--fs-sub-2); line-height: var(--lh-sub-2); font-weight: var(--fw-semibold); }
.body-1, p.ar { font-family: var(--font-body); font-size: var(--fs-body-1); line-height: var(--lh-body-1); font-weight: var(--fw-regular); color: var(--fg-2); }
.body-2 { font-family: var(--font-body); font-size: var(--fs-body-2); line-height: var(--lh-body-2); font-weight: var(--fw-regular); color: var(--fg-2); }
.label-1 { font-family: var(--font-body); font-size: var(--fs-label-1); line-height: var(--lh-label-1); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; }
.label-2 { font-family: var(--font-body); font-size: var(--fs-label-2); line-height: var(--lh-label-2); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.08em; }
.button-t { font-family: var(--font-body); font-size: var(--fs-button); line-height: var(--lh-button); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 768px) {
  .h1, h1.ar { font-size: var(--fs-h1-m); }
  .h2, h2.ar { font-size: var(--fs-h2-m); }
  .h3, h3.ar { font-size: var(--fs-h3-m); }
  .h4, h4.ar { font-size: var(--fs-h4-m); }
}

/* Utilities */
.ar-display { font-family: var(--font-display); }
.ar-body    { font-family: var(--font-body); }
.ar-ui      { font-family: var(--font-ui); }

.ar-bg-navy       { background: var(--ar-navy-800); color: var(--fg-on-dark); }
.ar-bg-navy-deep  { background: var(--ar-navy-950); color: var(--fg-on-dark); }
.ar-bg-hero       { background: var(--ar-grad-hero); color: var(--fg-on-dark); }
.ar-fg-brand      { color: var(--ar-navy-800); }
.ar-fg-cyan       { color: var(--ar-cyan-500); }