/* ============================================================
   Ilmverse token layer for the "How AI Works" resource.
   Replaces the Shahbaaz Khan design system: same page, retuned to
   the Ilmverse brand — luminous sky-blue, Raleway, light surfaces,
   soft blue-tinted shadows, fully-rounded geometry.
   ============================================================ */

/* Raleway — the brand typeface, self-hosted from the site root. */
@font-face {
  font-family: "Raleway";
  src: url("/fonts/raleway-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Ilmverse palette ---- */
  --sky-50:  #e5f3fc;
  --sky-100: #daeefb;
  --sky-200: #c5e5fa;
  --sky-300: #97d2f9;
  --sky-400: #5cbbf8;
  --sky-500: #58b9f8;
  --sky-600: #41a9ed;
  --sky-700: #007acc;
  --deep-500: #3583af;
  --deep-600: #226887;
  --deep-700: #1b4f68;
  --white: #ffffff;
  --ink:   #2b2b2b;
  --gray-700: #414042;
  --gray-500: #666666;
  --gray-400: #8f8f8f;
  --gray-300: #b6b6b6;
  --gray-200: #e5e5e5;
  --gray-100: #f3f3f3;
  --gray-50:  #fafbfc;

  --hero-glow: radial-gradient(120% 95% at 50% 118%,
      var(--sky-700) 0%, var(--sky-600) 17%, var(--sky-400) 26%,
      var(--sky-300) 39%, var(--sky-200) 51%, var(--sky-100) 58%,
      var(--sky-50) 66%, var(--white) 85%);

  /* ---- Fonts ---- */
  --font-ui: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-ui);
  /* Functional monospace, reserved for literal machine text — token IDs,
     prompts, the prediction stub. Prose stays Raleway. */
  --font-mono: "SFMono-Regular", "JetBrains Mono", ui-monospace, Menlo,
               Consolas, monospace;

  /* ---- Weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* ---- Type scale ---- */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --lh-body: 1.55;
  --lh-tight: 1.18;
  --tracking-tight: 0.01em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* ---- Spacing (4px base, matches Ilmverse) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* ---- Radius (fully-rounded brand) ---- */
  --radius-0: 14px;   /* was sharp; now a soft Ilmverse corner */
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* ---- Borders (hairline, not brutalist) ---- */
  --bw-1: 1px;
  --bw-2: 1.5px;

  /* ---- Soft, blue-tinted shadows ---- */
  --shadow-xs: 0 1px 2px rgba(5, 54, 95, 0.06);
  --shadow-sm: 0 2px 8px rgba(5, 54, 95, 0.08);
  --shadow-md: 0 8px 24px rgba(5, 54, 95, 0.12);
  --shadow-float: 0 11px 40px rgba(5, 54, 95, 0.20);
  --shadow-glow: 0 8px 32px rgba(88, 185, 248, 0.35);

  /* ---- Motion (calm; no snap) ---- */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms;
  --ease-snap: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Semantic surfaces / text (light theme) ---- */
  --bg-1: var(--gray-50);     /* page */
  --bg-2: var(--white);       /* cards */
  --bg-3: var(--gray-100);    /* sunken / empty heat cell */
  --fg-1: var(--ink);         /* primary text */
  --fg-2: #555a5e;            /* secondary text */
  --fg-3: var(--gray-500);    /* muted / captions */
  --border-1: var(--gray-200);
  --border-2: var(--gray-100);

  /* ---- Accent roles ----
     Sky-blue reads at large sizes and as a fill, but FAILS contrast as
     small text on white — so accent text uses a deeper blue. */
  --accent: var(--sky-500);          /* graphic accent, borders, large fills */
  --accent-strong: var(--sky-700);   /* deep azure — primary fills */
  --accent-soft: var(--sky-200);
  --accent-bright: var(--sky-600);
  --accent-text: var(--deep-600);    /* AA-safe accent text on white */
  --accent-text-lg: var(--sky-700);  /* accent text at display sizes */
  --on-accent: var(--white);         /* text on an accent fill */

  /* ---- Legacy SK aliases, remapped so the page's markup still resolves
     without rewriting every reference. ---- */
  --sk-green: var(--accent);
  --sk-green-bright: var(--accent-bright);
  --sk-green-soft: var(--accent-soft);
  --sk-ink: var(--ink);
  --sk-paper: var(--white);
  --sk-black: var(--white);

  /* "Plausible but false" warning — a warm, AA-safe rust */
  --warning: #c2410c;
  --warning-soft: #fdebd9;
}