/* ═══════════════════════════════════════════════════════════
   SGT Design Tokens — Single Source of Truth
   ===========================================================
   Aligned with SGT-2025-Rebranding Figma (Laura).

   Consumed by:
     - sgt-presentation.css       (Reveal v3, dark-first slides)
     - sgt-presentation-v4.css    (Reveal v4, Figma Slides style)
     - sgt-marp.css               (Marp CLI theme)
     - sgt-ds-core.css            (DOM-agnostic web components)
     - any external HTML/CSS via:  @import "../SGT-Branding/tokens.css";

   Mirror in JSON form: tokens.json (for docs, JS, build tooling).

   Naming convention:
     --sgt-*       brand + neutral + system colors
     --text-*      typography scale
     --lh-*        line-heights
     --sp-N        spacing (N × 4px)
     --radius-*    border radii
     --shadow-*    elevations
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ───────────────────────────────────────── */
  --sgt-purple:           #754cff;
  --sgt-purple-light:     #d2c1ff;
  --sgt-purple-gradient:  #8972fc;

  /* ── Neutrals ───────────────────────────────────────────── */
  --sgt-black:        #1e1e1e;
  --sgt-grey-dark:    #aaaaaa;
  --sgt-grey:         #767676;
  --sgt-grey-mid:     #cccccc;
  --sgt-grey-light:   #f5f5f5;
  --sgt-border:       #e0e0e0;
  --sgt-white:        #ffffff;
  --sgt-warm-white:   #faf8f5;

  /* ── Department Colors ──────────────────────────────────── */
  /* Light-Mode: brand-saturated. Dark-Mode: lighter variants. */
  --sgt-strategy:         #d9e530;
  --sgt-strategy-light:   #d3f030;
  --sgt-creativity:       #ffd129;
  --sgt-creativity-light: #ffc800;
  --sgt-technology:       #629cfa;
  --sgt-technology-light: #7dafff;

  /* ── System Colors ──────────────────────────────────────── */
  --sgt-green: #1d862d;
  --sgt-red:   #ec1111;

  /* ── Font Family ────────────────────────────────────────── */
  --sgt-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ── Typography Scale (Desktop) ─────────────────────────── */
  --text-sm:    14px;
  --text-md:    18px;
  --text-lg:    24px;
  --text-xl:    30px;
  --text-2xl:   40px;
  --text-3xl:   50px;
  --text-4xl:   60px;
  --text-5xl:   70px;
  --text-6xl:   80px;
  --text-7xl:  120px;
  --text-8xl:  160px;

  /* ── Line-Heights (paired with --text-*) ────────────────── */
  --lh-sm:    22px;
  --lh-md:    26px;
  --lh-lg:    34px;
  --lh-xl:    40px;
  --lh-2xl:   52px;
  --lh-3xl:   63px;
  --lh-4xl:   75px;
  --lh-5xl:   88px;
  --lh-6xl:  100px;
  --lh-7xl:  120px;
  --lh-8xl:  160px;

  /* ── Typography Scale (Mobile) ──────────────────────────── */
  --text-sm-m:   14px;
  --text-md-m:   16px;
  --text-lg-m:   18px;
  --text-xl-m:   22px;
  --text-2xl-m:  28px;
  --text-3xl-m:  35px;
  --text-4xl-m:  38px;
  --text-5xl-m:  40px;
  --text-6xl-m:  45px;
  --text-7xl-m:  55px;
  --text-8xl-m:  65px;

  /* ── Letter-Spacing ─────────────────────────────────────── */
  --tracking-default: 0.01em;
  --tracking-loose:   0.02em;

  /* ── Spacing (4px base) ─────────────────────────────────── */
  --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-15: 60px;
  --sp-20: 80px;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(30, 30, 30, 0.06);
  --shadow-md: 0 4px 12px rgba(30, 30, 30, 0.08);
  --shadow-lg: 0 12px 32px rgba(30, 30, 30, 0.12);

  /* ── Gradients ──────────────────────────────────────────── */
  --sgt-gradient-purple:     linear-gradient(135deg, #1e1e1e 0%, #2a1a4e 40%, #3d2480 70%, #754cff 100%);
  --sgt-gradient-strategy:   linear-gradient(135deg, #1e1e1e 0%, #2a2e1a 35%, #4a5a18 65%, #d9e530 100%);
  --sgt-gradient-creativity: linear-gradient(135deg, #1e1e1e 0%, #2e2a1a 35%, #5a4a18 65%, #ffd129 100%);
  --sgt-gradient-technology: linear-gradient(135deg, #1e1e1e 0%, #1a2230 35%, #1e3a5a 65%, #629cfa 100%);
  --sgt-gradient-dark:       linear-gradient(180deg, #1e1e1e 0%, #2a2a2a 100%);
  --sgt-gradient-purple-radial: radial-gradient(circle at center, #754cff 0%, #8972fc 100%);

  /* ── Glassmorphism ──────────────────────────────────────── */
  --glass-bg:     rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.10);

  /* ── Transitions ────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
}

/* ── Mobile Token Overrides ─────────────────────────────────
   Auto-swap desktop sizes for mobile sizes ≤ 768px.
   Components consume --text-* — no media query needed in them.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-sm:    var(--text-sm-m);
    --text-md:    var(--text-md-m);
    --text-lg:    var(--text-lg-m);
    --text-xl:    var(--text-xl-m);
    --text-2xl:   var(--text-2xl-m);
    --text-3xl:   var(--text-3xl-m);
    --text-4xl:   var(--text-4xl-m);
    --text-5xl:   var(--text-5xl-m);
    --text-6xl:   var(--text-6xl-m);
    --text-7xl:   var(--text-7xl-m);
    --text-8xl:   var(--text-8xl-m);
  }
}