/* =============================================================
   tokens.css — illusionlab design tokens (MIRROR)

   Source of truth: illusionlab/design-system/parent-ci/colors_and_type.css
   Last synced:    2026-04-24
   Token checksum: e7b351d0e8db706f  (sha256, normalized, first 16 chars)

   Do NOT edit the :root { --il-* } block here.
   On CI update: run `node tools/check-ci-sync.mjs`, resync, update timestamp + checksum.

   Differences from source (intentional, web-delivery-only):
   - @font-face declarations below point to local woff2 subsets (not .ttf).
   - JetBrains Mono loaded via Google Fonts per CI spec (only external font).
   - Only weights actually used on this site are loaded.
   ============================================================= */

/* -------- JetBrains Mono (per CI: only external font, for data readouts) -------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* -------- Cormorant Garamond (display/serif) -------- */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/cormorant-garamond/cormorant-300.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('/fonts/cormorant-garamond/cormorant-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cormorant-garamond/cormorant-400.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/cormorant-garamond/cormorant-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/cormorant-garamond/cormorant-500.woff2') format('woff2'); }

/* -------- Montserrat (UI/sans) -------- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/montserrat/montserrat-300.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/montserrat/montserrat-400.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/montserrat/montserrat-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/montserrat/montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/montserrat/montserrat-700.woff2') format('woff2'); }

/* -------- Montserrat Alternates (feature moments) -------- */
@font-face { font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/montserrat-alternates/alternates-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/montserrat-alternates/alternates-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat Alternates'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/montserrat-alternates/alternates-700.woff2') format('woff2'); }

/* =============================================================
   :root — MIRROR BLOCK (do not edit, run check-ci-sync.mjs)
   ============================================================= */
:root {
  /* -------- Colors: Surfaces -------- */
  --il-black:       #07070A;   /* Deep Black — default background */
  --il-charcoal:    #0F0F12;   /* Elevated surface 1 (cards) */
  --il-ink:         #16161B;   /* Elevated surface 2 (floating) */
  --il-navy:        #0B1024;   /* Mystery hero background */
  --il-overlay:     rgba(7, 7, 10, 0.72);

  /* -------- Colors: Primary accent (Gold) -------- */
  --il-gold:        #D4AF37;   /* Primary gold */
  --il-gold-bright: #E9C66A;   /* Hover / highlight */
  --il-gold-deep:   #A6862C;   /* Pressed / deep */
  --il-gold-weak:   rgba(212, 175, 55, 0.12);

  /* -------- Colors: Optional violet mystery (use sparingly) -------- */
  --il-violet-mist: #3A2C5A;

  /* -------- Colors: Text hierarchy -------- */
  --il-paper:       #F2F2F2;   /* Off-white — primary text on dark */
  --il-text-1:      #F2F2F2;   /* Primary text */
  --il-text-2:      #9BA1AA;   /* Secondary text */
  --il-text-3:      #6A707B;   /* Muted / meta */
  --il-text-4:      #464C57;   /* Disabled */

  /* -------- Colors: Borders / dividers -------- */
  --il-border-weak:   rgba(255, 255, 255, 0.06);
  --il-border:        rgba(255, 255, 255, 0.10);
  --il-border-strong: rgba(255, 255, 255, 0.18);
  --il-border-gold:   rgba(212, 175, 55, 0.25);
  --il-divider:       rgba(255, 255, 255, 0.08);

  /* -------- Colors: Semantic states (muted, not neon) -------- */
  --il-success:  #5FAE7C;
  --il-warning:  #D9A24B;
  --il-error:    #C85A5A;
  --il-info:     #6A84B8;

  /* -------- Typography: Families -------- */
  --font-serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-sans:  "Montserrat", "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --font-alt:   "Montserrat Alternates", "Montserrat", -apple-system, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* -------- Typography: Scale (web) -------- */
  --fs-display-xl: 96px;   /* Hero wordmark / brand moment */
  --fs-display:    72px;   /* Marketing hero */
  --fs-h1:         56px;
  --fs-h2:         40px;
  --fs-h3:         28px;
  --fs-h4:         22px;
  --fs-h5:         18px;
  --fs-title:      20px;
  --fs-body-l:     18px;
  --fs-body:       15px;
  --fs-body-s:     13px;
  --fs-label:      12px;
  --fs-overline:   11px;
  --fs-caption:    11px;

  /* -------- Spacing scale (4, 8, 12, 16, 24, 40, 64, 96, 160) -------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   40px;
  --sp-7:   64px;
  --sp-8:   96px;
  --sp-9:   160px;

  /* -------- Radii -------- */
  --r-sm:   4px;
  --r-md:   8px;   /* default inputs & buttons */
  --r-lg:   12px;  /* cards & panels */
  --r-xl:   16px;  /* modals */
  --r-2xl:  24px;
  --r-pill: 9999px;

  /* -------- Elevation -------- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --elev-2: 0 8px 24px rgba(0, 0, 0, 0.50);
  --elev-3: 0 24px 64px rgba(0, 0, 0, 0.60);
  --elev-gold: 0 0 32px rgba(212, 175, 55, 0.15);
  --elev-gold-strong: 0 0 48px rgba(212, 175, 55, 0.22);

  /* -------- Motion -------- */
  --ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro:    120ms;
  --dur-fast:     180ms;
  --dur-base:     240ms;
  --dur-slow:     400ms;
  --dur-cinema:   800ms;

  /* -------- Layout -------- */
  --page-max: 1280px;
  --page-pad: 80px;
}

/* =============================================================
   Base & semantic typography (mirrored from CI)
   ============================================================= */

html, body {
  background: var(--il-black);
  color: var(--il-text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display / hero — serif, editorial */
.il-display-xl,
.il-display,
.il-h1,
.il-h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--il-text-1);
  text-wrap: balance;
}

.il-display-xl { font-size: var(--fs-display-xl); }
.il-display    { font-size: var(--fs-display); }
.il-h1         { font-size: var(--fs-h1); line-height: 1.08; }
.il-h2         { font-size: var(--fs-h2); line-height: 1.15; font-weight: 400; }

/* Heading 3–5 — sans, structural */
.il-h3, .il-h4, .il-h5, .il-title {
  font-family: var(--font-sans);
  color: var(--il-text-1);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.il-h3    { font-size: var(--fs-h3); }
.il-h4    { font-size: var(--fs-h4); }
.il-h5    { font-size: var(--fs-h5); }
.il-title { font-size: var(--fs-title); font-weight: 500; }

/* Body text */
.il-body-l { font-size: var(--fs-body-l); line-height: 1.6; color: var(--il-text-2); }
.il-body   { font-size: var(--fs-body);   line-height: 1.6; color: var(--il-text-2); }
.il-body-s { font-size: var(--fs-body-s); line-height: 1.55; color: var(--il-text-3); }

/* Labels, overline, caption, nav, button, data */
.il-overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--il-text-3);
}
.il-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--il-text-2);
}
.il-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--il-text-3);
}
/* .il-nav / .il-button are typography utilities per CI.
   Container components below (.site-nav, .btn-*) use distinct names to avoid collision. */
.il-nav {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--il-text-2);
}
.il-button {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.il-data,
.il-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--il-text-1);
  letter-spacing: 0;
}

/* Wordmark — the illusionlab word itself */
.il-wordmark {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--il-gold);
}

/* Selection */
::selection { background: var(--il-gold); color: var(--il-black); }