/* Generated by scripts/sync_design_system.py from ir-advantage-design-system a39b55d — do not edit */
:root {
  /* ── Primary Brand Colors ───────────────────────────────────────────── */
  --navy:          #374083;   /* Navy Blue — primary, headings, wordmark */
  --blue:          #2A64A3;   /* Corporate Blue — logo "I", links */
  --gold:          #FEB600;   /* Gold — accent. Fills, rules and TEXT ON DARK ONLY */
  --gold-text:     #7F5A00;   /* v2 — gold for text/icons on light surfaces (5.4–6.2:1) */
  --dark-gray:     #333333;   /* Body text, tagline */

  /* ── Monochrome Palette ─────────────────────────────────────────────── */
  --charcoal:      #373737;   /* Logo mono: I stem */
  --medium-gray:   #5C6370;   /* v2 (was #6B7280) — secondary text; passes on all light surfaces */
  --medium-gray-2: #555555;   /* Mono: R letter */
  --light-gray:    #B6B6B6;   /* v2 — NON-TEXT only: dividers, disabled borders */
  --off-white:     #F8F7F5;   /* Page background */
  --white:         #FFFFFF;
  --black:         #000000;

  /* ── Semantic Foreground (light surfaces) ───────────────────────────── */
  --fg-1:          var(--navy);        /* Headings                    8.82:1 on off-white */
  --fg-2:          var(--dark-gray);   /* Body                       11.80:1 */
  --fg-3:          var(--medium-gray); /* Secondary body / captions   5.65:1 (5.26 on muted) */
  --fg-4:          var(--light-gray);  /* v2 — non-text only. Never set text in --fg-4. */
  --fg-accent:     var(--gold-text);   /* Eyebrows, icons, highlights on light */
  --fg-link:       var(--blue);        /* Links — underline them in running text */

  /* ── Semantic Foreground (dark surfaces: navy / hero / nav) ─────────── */
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  rgba(255,255,255,0.78);  /* v2 (was .72) — body on navy     6.48:1 */
  --fg-on-dark-3:  rgba(255,255,255,0.70);  /* v2 (was .55) — FLOOR for text   5.58:1 */
  --fg-on-dark-4:  rgba(255,255,255,0.35);  /* v2 — non-text only (rules, borders) */

  /* ── Semantic Foreground (footer: charcoal) ─────────────────────────── */
  --fg-on-footer-1: rgba(255,255,255,0.85); /* v2 — footer links and headings */
  --fg-on-footer-2: rgba(255,255,255,0.60); /* v2 — FLOOR for footer text  (≥5.4:1) */

  /* ── Semantic Background ────────────────────────────────────────────── */
  --bg-page:       var(--off-white);
  --bg-surface:    var(--white);
  --bg-inverse:    var(--navy);        /* Primary dark surface */
  --bg-inverse-2:  #2A2A2A;            /* Footer (charcoal, 2px gold top border) */
  --bg-muted:      #F1EFEA;

  /* ── Borders / Lines ────────────────────────────────────────────────── */
  --border-hair:   rgba(0,0,0,0.06);   /* Decorative card edges (non-essential) */
  --border-soft:   rgba(0,0,0,0.10);
  --border-on-dark: rgba(255,255,255,0.12);
  --border-accent: var(--gold);
  --border-field:  #8C8C8C;            /* v2 — form inputs on light, 3.36:1 */
  --border-field-on-dark: rgba(255,255,255,0.55); /* v2 — form inputs on navy, ≥3:1 */

  /* ── Focus ──────────────────────────────────────────────────────────── */
  --focus-ring:    var(--navy);        /* v2 — 3px outline; gold inside .on-dark */
  --focus-width:   3px;
  --focus-offset:  3px;

  /* ── Status ─────────────────────────────────────────────────────────── */
  --status-green:  #4ADE80;            /* Dots/fills on dark surfaces */
  --status-amber:  var(--gold);
  --status-red:    #F87171;
  --status-green-text: #1E6B34;        /* v2 — status as text on light */
  --status-red-text:   #B3261E;        /* v2 — errors as text on light */
  --error:         var(--status-red-text);

  /* ── Typography — Families ──────────────────────────────────────────── */
  --font-display:  'EB Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-logo:     'TeX Gyre Pagella', 'Palatino Linotype', 'Book Antiqua', Palatino, serif; /* wordmark + tagline only */
  --font-body:     'Lato', 'Arial', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Typography — Weights ───────────────────────────────────────────── */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;   /* Lato 500 is not in the web set — renders as 400/600 */
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-black:      900;   /* Not in the web set — use 700 */

  /* ── Typography — Scale (body 17px base) ────────────────────────────── */
  --fs-eyebrow:    12px;   /* UPPERCASE labels, 2–3px tracking */
  --fs-micro:      11px;
  --fs-caption:    13px;
  --fs-body-sm:    15px;
  --fs-body:       17px;
  --fs-body-lg:    19px;
  --fs-h6:         20px;
  --fs-h5:         22px;
  --fs-h4:         clamp(22px, 2.2vw, 28px);
  --fs-h3:         clamp(24px, 2.8vw, 34px);
  --fs-h2:         clamp(30px, 3.8vw, 48px);
  --fs-h1:         clamp(40px, 5.5vw, 68px);

  /* ── Typography — Other ─────────────────────────────────────────────── */
  --lh-tight:      1.2;
  --lh-snug:       1.35;
  --lh-normal:     1.55;
  --lh-relaxed:    1.7;
  --lh-loose:      1.8;

  --tracking-eyebrow:  0.22em;   /* ~3px at 12px */
  --tracking-label:    0.12em;
  --tracking-wordmark: 0.14em;   /* ADVANTAGE letter-spacing */

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --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;
  --section-pad: clamp(64px, 8vw, 120px);
  --content-max: 1140px;
  --measure: 34em;          /* v2 — ~66 characters for long-form reading */

  /* ── Radii ──────────────────────────────────────────────────────────── */
  /* IR Advantage uses small radii. Corporate, not playful. */
  --radius-0: 0;
  --radius-xs: 2px;        /* Buttons, chips, form fields */
  --radius-sm: 3px;        /* Cards */
  --radius-md: 4px;        /* Nested surfaces */
  --radius-pill: 999px;    /* Avatars / circle dots only */

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-none: none;
  --shadow-1: 0 2px 8px rgba(55, 64, 131, 0.06);
  --shadow-2: 0 12px 32px rgba(55, 64, 131, 0.10);
  --shadow-3: 0 12px 40px rgba(55, 64, 131, 0.10);
  --shadow-hero: 0 16px 48px rgba(55, 64, 131, 0.15);
  --shadow-press: 0 4px 12px rgba(55, 64, 131, 0.08);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.5s;
  --dur-reveal: 0.7s;
}
.on-dark {
  background: var(--bg-inverse);
  color: var(--fg-on-dark);
  --fg-1: var(--fg-on-dark);
  --fg-2: var(--fg-on-dark-2);
  --fg-3: var(--fg-on-dark-3);
  --fg-accent: var(--gold);
  --fg-link: var(--fg-on-dark);
  --focus-ring: var(--gold);
  --border-field: var(--border-field-on-dark);
}
.on-footer {
  background: var(--bg-inverse-2);
  border-top: 2px solid var(--gold);
  color: var(--fg-on-footer-2);
  --fg-1: var(--fg-on-footer-1);
  --fg-2: var(--fg-on-footer-2);
  --fg-3: var(--fg-on-footer-2);
  --fg-accent: var(--gold);
  --fg-link: var(--fg-on-footer-1);
  --focus-ring: var(--gold);
}