/* SYNCED COPY — do not edit by hand.
   Canonical source: packages/design-tokens/css/tokens.css
   Refresh with: cd 20-rapidity-site && npm run sync-assets */

/* ═══════════════════════════════════════════════════════════════════════════
   Mitra AI — design tokens (single source of truth)
   packages/design-tokens/css/tokens.css

   Consumed by every portal:
     · 06-core-web-app, 07-b2b-portal, 09-investor-portal, 10-employee-portal —
       imported in src/main.tsx (Vite resolves the relative path at build).
     · 08-mitra-site — static copy at site/assets/tokens.css, synced via
       `npm run sync-tokens` in 08-mitra-site/ (the site has no build step).

   Themes:
     · default / [data-theme="midnight"] — dark, used by the authenticated
       portals (charcoal surfaces, champagne accent).
     · [data-theme="ivory"] — light, used by the public corporate site
       (ivory surfaces, navy ink, the same champagne accent family).

   Every text/background pairing listed here passes WCAG 2.1 AA (≥4.5:1 for
   normal text). Verification pairs live in docs/uxui-audit.md §9 and the
   contrast table in packages/design-tokens/README.md.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Primitives: brand palette ──────────────────────────────────────────
     Deep restrained neutrals + one precious-metal accent. Primitives are
     implementation detail — portals should reference the semantic tokens
     below, never these directly. */
  --mitra-black:      #05060A; /* absolute stage backdrop */
  --mitra-charcoal-900: #0E1116; /* midnight surface */
  --mitra-charcoal-800: #161A21; /* raised panel */
  --mitra-charcoal-700: #1B202A; /* tile */
  --mitra-charcoal-600: #2A3140; /* hairline border on dark */
  --mitra-navy-900:   #12233A;  /* deep navy (light-theme footer/ink blocks) */
  --mitra-navy-700:   #1F3A5F;  /* brand navy (light-theme primary) */
  --mitra-ivory-100:  #FBF9F5;  /* page ivory */
  --mitra-ivory-200:  #F2EEE6;  /* sunken ivory */
  --mitra-ivory-300:  #E4E0D8;  /* hairline border on light */
  --mitra-ivory-text: #F3F1EC;  /* high-emphasis text on dark */
  --mitra-ink-900:    #20242B;  /* high-emphasis text on light */
  --mitra-gold-400:   #C9A24B;  /* champagne — THE accent, both themes */
  --mitra-gold-600:   #846426;  /* deep gold — accent as text on ivory (AA) */
  --mitra-gold-700:   #8A7A4E;  /* muted gold — soft borders/soft accents */
  --mitra-gold-ink:   #1D1503;  /* ink on a gold fill */

  /* ── Typography ─────────────────────────────────────────────────────────
     Exactly two typefaces platform-wide. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Helvetica, Arial, sans-serif;

  /* Type scale (1.25 modular-ish, rem-based) */
  --text-xs:   0.75rem;   /* 12px — captions, eyebrows */
  --text-sm:   0.875rem;  /* 14px — secondary UI text */
  --text-base: 1rem;      /* 16px — body */
  --text-lg:   1.125rem;  /* 18px — lead paragraphs */
  --text-xl:   1.375rem;  /* 22px — h4 / card titles */
  --text-2xl:  1.75rem;   /* 28px — h3 */
  --text-3xl:  2.25rem;   /* 36px — h2 */
  --text-4xl:  3rem;      /* 48px — h1 / hero */

  --leading-tight: 1.2;   /* display headings */
  --leading-snug:  1.4;   /* subheads */
  --leading-body:  1.65;  /* body copy — generous by design */

  --tracking-heading: 0.01em;  /* display serif breathes slightly */
  --tracking-eyebrow: 0.18em;  /* uppercase eyebrow labels */

  /* ── Spacing — 8px grid (–1 is the sanctioned half-step) ───────────────── */
  --space--1: 0.25rem;  /*  4px */
  --space-1:  0.5rem;   /*  8px */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-5:  2.5rem;   /* 40px */
  --space-6:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px — section rhythm on marketing pages */

  /* ── Radii ──────────────────────────────────────────────────────────────── */
  --radius-sm:   4px;   /* inputs, small chips */
  --radius-md:   8px;   /* buttons, fields */
  --radius-lg:   12px;  /* cards */
  --radius-xl:   16px;  /* feature panels */
  --radius-pill: 999px;

  /* ── Motion — deliberate, never bouncy ─────────────────────────────────── */
  --ease-luxe: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-quick: 200ms;  /* opacity/color only */
  --duration-base:  350ms;  /* standard hover/reveal */
  --duration-slow:  450ms;  /* large-surface reveals */

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --measure-prose: 65ch;
  --container-max: 1120px;
}

/* ═══ Semantic tokens — MIDNIGHT (default; authenticated portals) ═══════ */
:root,
[data-theme='midnight'] {
  color-scheme: dark;

  --color-primary:        var(--mitra-ivory-text); /* primary ink on dark */
  --color-accent:         var(--mitra-gold-400);
  --color-accent-soft:    var(--mitra-gold-700);
  --color-accent-text:    var(--mitra-gold-400);   /* AA 7.9:1 on surface */
  --color-on-accent:      var(--mitra-gold-ink);   /* text on a gold fill */

  --color-surface:        var(--mitra-charcoal-900);
  --color-surface-raised: var(--mitra-charcoal-800);
  --color-surface-tile:   var(--mitra-charcoal-700);
  --color-surface-deep:   var(--mitra-black);

  --color-text-primary:   var(--mitra-ivory-text); /* 16.8:1 */
  --color-text-secondary: #A9AEB8;                 /*  8.5:1 */
  --color-text-muted:     #8A919D;                 /*  6.0:1 */

  /* Text on --color-surface-deep. The ivory theme has always defined these
     because its deep surface is navy against an otherwise light page; midnight
     did not, since nothing rendered midnight's deep panels until the corporate
     site and the public theme toggle arrived (2026-08-07). The omission was not
     inert: `fill: var(--color-text-muted-on-deep)` in the plate figures had no
     value in midnight and fell back to the SVG default, painting every diagram
     label pure black on a near-black plate. Contrast measured on #05060A. */
  --color-text-on-deep:       var(--color-text-primary); /* 17.9:1 */
  --color-text-muted-on-deep: var(--color-text-muted);   /*  6.4:1 */

  --color-border:          var(--mitra-charcoal-600);
  --color-border-accent:   var(--mitra-gold-700);

  --color-success: #6FAE8A;  /* 7.3:1 on surface */
  --color-warning: #D9A441;  /* 8.4:1 on surface */
  --color-danger:  #C77F7F;  /* 6.1:1 on surface */

  --color-focus-ring: var(--mitra-gold-400);

  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.45);

  /* Translucent accent washes (replace ad-hoc rgba() literals) */
  --wash-accent-08: rgba(201, 162, 75, 0.08);
  --wash-accent-14: rgba(201, 162, 75, 0.14);
  --wash-accent-25: rgba(201, 162, 75, 0.25);
  --wash-success-08: rgba(111, 174, 138, 0.08);
  --wash-success-20: rgba(111, 174, 138, 0.20);

  /* ── Legacy aliases (pre-token portal vars; migrate off, don't add) ──── */
  --bg-deep:      var(--color-surface);
  --bg-panel:     var(--color-surface-raised);
  --tile:         var(--color-surface-tile);
  --tile-border:  var(--color-border);
  --gold:         var(--color-accent);
  --gold-soft:    var(--color-accent-soft);
  --text-hi:      var(--color-text-primary);
  --text-mid:     var(--color-text-secondary);
  --text-low:     var(--color-text-muted);
  --green:        var(--color-success);
  --red:          var(--color-danger);
}

/* ═══ Semantic tokens — IVORY (public corporate site) ═══════════════════ */
[data-theme='ivory'] {
  color-scheme: light;

  --color-primary:        var(--mitra-navy-700);  /* 10.9:1 on surface */
  --color-accent:         var(--mitra-gold-400);
  --color-accent-soft:    var(--mitra-gold-700);
  --color-accent-text:    var(--mitra-gold-600);  /* 5.2:1 on surface */
  --color-on-accent:      var(--mitra-gold-ink);

  --color-surface:        var(--mitra-ivory-100);
  --color-surface-raised: #FFFFFF;
  --color-surface-tile:   var(--mitra-ivory-200);
  --color-surface-deep:   var(--mitra-navy-900);  /* footer / ink panels */

  --color-text-primary:   var(--mitra-ink-900);   /* 14.8:1 */
  --color-text-secondary: #4C5560;                /*  7.2:1 */
  --color-text-muted:     #5E6670;                /*  5.5:1 */

  /* On the deep-navy footer/ink panels */
  --color-text-on-deep:       var(--mitra-ivory-text);
  --color-text-muted-on-deep: #AAB6C6;            /* 7.7:1 on navy-900 */

  --color-border:        var(--mitra-ivory-300);
  --color-border-accent: var(--mitra-gold-700);

  --color-success: #2E6B4F;  /* 6.0:1 on surface */
  --color-warning: #805415;  /* 6.3:1 on surface */
  --color-danger:  #B3261E;  /* 6.2:1 on surface */

  --color-focus-ring: var(--mitra-navy-700);

  --shadow-card:  0 1px 2px rgba(18, 35, 58, 0.06);
  --shadow-float: 0 16px 40px rgba(18, 35, 58, 0.12);

  --wash-accent-08: rgba(201, 162, 75, 0.08);
  --wash-accent-14: rgba(201, 162, 75, 0.14);
  --wash-accent-25: rgba(201, 162, 75, 0.25);
  --wash-success-08: rgba(46, 107, 79, 0.08);
  --wash-success-20: rgba(46, 107, 79, 0.20);

  /* ── Legacy aliases (pre-token corporate-site vars) ────────────────────── */
  --navy:       var(--color-primary);
  --navy-dark:  var(--mitra-navy-900);
  --gold:       var(--color-accent);
  --gold-light: var(--color-accent);
  --cream:      var(--color-surface);
  --grey:       var(--color-text-muted);
  --line:       var(--color-border);
}