/* -----------------------------------------------------------------------------
 * File: tokens.css
 * Purpose: Design tokens for the AURA Platform Handover presentation microsite.
 *          Values are copied 1:1 from AURA's product dark theme
 *          (aura_admin_api/static/css/theme.css) so the presentation reads as
 *          the same product family, then extended (bg_deep, depth stops,
 *          drill_amber, larger type/space steps) for a graphical, full-bleed
 *          presentation layout. See ../STYLE-GUIDE.md for usage.
 * Source of truth: ../brand-tokens.json — do not hand-edit values here without
 *          updating that file too.
 * -------------------------------------------------------------------------- */

@font-face {
  /* System-first: IBM Plex Sans is not embedded (no build step / no CDN).
     Falls back to the platform sans stack, which reads close to Plex's
     proportions. If Plex is installed locally it will be picked up. */
  font-family: 'IBM Plex Sans';
  src: local('IBM Plex Sans');
  font-display: swap;
}

:root {
  /* ---------- Color: surfaces (dark presentation theme, default) ---------- */
  --c-bg-deep: #061019;      /* full-bleed hero / chapter-break backdrops */
  --c-bg-primary: #0a1726;   /* page background */
  --c-bg-secondary: #0d2335; /* section bands, side nav */
  --c-bg-tertiary: #143246;  /* raised surfaces, table stripes */
  --c-bg-card: #0f2a3d;      /* card / panel fill */

  /* ---------- Color: depth ramp (for gradients, diagram backdrops) ---------- */
  --c-depth-1: #0a1726;
  --c-depth-2: #0d2335;
  --c-depth-3: #143246;
  --c-depth-4: #1b3b4f;

  /* ---------- Color: text ---------- */
  --c-text-primary: #eaf3f6;
  --c-text-secondary: #9fb4c2;
  --c-text-muted: #6b8294;

  /* ---------- Color: structure ---------- */
  --c-border: #1b3b4f;
  --c-border-soft: rgba(27, 59, 79, 0.6);

  /* ---------- Color: accent + semantic ---------- */
  --c-accent: #1cc3b0;
  --c-accent-hover: #2dd4bf;
  --c-accent-soft: rgba(45, 212, 191, 0.14);
  --c-accent-glow: rgba(45, 212, 191, 0.35);
  --c-success: #34d399;
  --c-warning: #fbbf24;
  --c-danger: #f87171;
  --c-info: #74c0fc;
  --c-drill-amber: #e8a34c; /* secondary data accent — use sparingly (2nd series, INERT pill) */

  /* ---------- Typography ---------- */
  --font-head: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Fira Code', Consolas, monospace;

  /* Type scale (1.25 major third), extended up for hero/stat display */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.25rem;    /* 20px */
  --fs-lg: 1.5625rem;  /* 25px */
  --fs-xl: 1.9375rem;  /* 31px */
  --fs-2xl: 2.4375rem; /* 39px */
  --fs-3xl: 3.0625rem; /* 49px */
  --fs-4xl: 3.8125rem; /* 61px */
  --fs-5xl: 5rem;      /* 80px — hero headline / stat numerals */

  --lh-body: 1.6;
  --lh-head: 1.15;
  --measure: 68ch;

  /* ---------- Space scale (4px base) ---------- */
  --sp-1: 0.25rem;  /* 4px */
  --sp-2: 0.5rem;   /* 8px */
  --sp-3: 0.75rem;  /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-6: 1.5rem;   /* 24px */
  --sp-8: 2rem;     /* 32px */
  --sp-12: 3rem;    /* 48px */
  --sp-16: 4rem;    /* 64px */
  --sp-24: 6rem;    /* 96px */
  --sp-32: 8rem;    /* 128px */

  /* ---------- Radius ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px rgba(28, 195, 176, 0.25), 0 8px 32px rgba(28, 195, 176, 0.12);

  /* ---------- Grid ---------- */
  --grid-columns: 12;
  --grid-gutter: 24px;
  --content-max: 1600px;
  --chapter-max: 1440px;
  --safe-margin: 64px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;

  /* ---------- Layout constants ---------- */
  --nav-width: 264px;
  --header-height: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* ---------------------------------------------------------------------------
 * Print theme overrides — light, ink-on-paper. css/print.css consumes these.
 * Kept here (not duplicated) so print.css only carries layout/page rules.
 * ------------------------------------------------------------------------ */
@media print {
  :root {
    --c-bg-deep: #ffffff;
    --c-bg-primary: #ffffff;
    --c-bg-secondary: #f8f9fa;
    --c-bg-tertiary: #eef1f3;
    --c-bg-card: #ffffff;

    --c-depth-1: #ffffff;
    --c-depth-2: #f4f6f7;
    --c-depth-3: #eef1f3;
    --c-depth-4: #e2e8ec;

    --c-text-primary: #16232c;
    --c-text-secondary: #45606d;
    --c-text-muted: #6b8294;

    --c-border: #d7e0e4;
    --c-border-soft: #e6ecee;

    --c-accent: #0e8c7d;
    --c-accent-hover: #0a6f63;
    --c-accent-soft: rgba(14, 140, 125, 0.08);
    --c-accent-glow: rgba(14, 140, 125, 0.2);

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;
  }
}