/* ═══════════════════════════════════════════════════════════════════════════
   Yggdrasil CX v2 · Design tokens
   Sourced from the Yggdrasil Roots Design System Figma library via MCP.
   - Primitives: purple 50–900, cyan 50–900, red 50–900, black, white
   - Semantic (Color collection): text/*, bg/*, border/*, status-and-labels/*
   Warm-neutral ink ramp replaced with the authoritative cool-neutral ramp.
   Adelle Sans is the official brand typeface; Source Sans 3 / Lora serve as
   web fallbacks for non-licensed environments.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Primitives · purple ramp (brand) ────────────────────────────── */
  --purple-50:  #faf5fa;
  --purple-100: #f0dcf0;      /* brand-subtle bg · status-purple bg */
  --purple-200: #e0b0e0;
  --purple-300: #d087d0;
  --purple-400: #b547b8;
  --purple-500: #98139c;      /* brand primary · text-link · border-brand */
  --purple-600: #890e8c;
  --purple-700: #710a73;
  --purple-800: #5d0660;      /* text-brand */
  --purple-900: #2e0047;

  /* ── Primitives · cyan ramp (secondary accent) ───────────────────── */
  --cyan-soft:  #cfeef2;
  --cyan-500:   #3abeda;
  --cyan-700:   #0088a7;      /* status-cyan text · Advania corporate accent */
  --cyan-900:   #0a4e60;

  /* ── Primitives · supporting accents ─────────────────────────────── */
  --green-500:  #aacf75;
  --green-700:  #5f8f3d;

  --ember-500:  #eb5a28;      /* fail-closed callout */
  --ember-700:  #b84419;

  --magenta-400:#e5108f;
  --magenta-500:#bf007e;
  --magenta-700:#7a0b5a;

  /* ── Hex gradients (Yggdrasil Roots — Capabilities palette) ──────
     Six-step top-to-bottom magenta → deep-purple progression, sourced
     directly from the Capabilities Figma frame (47:2). Each step gets
     a brighter top stop and a darker bottom stop. */
  --grad-cap-1: linear-gradient(180deg, #ec1485 0%, #8d0753 100%);
  --grad-cap-2: linear-gradient(180deg, #d51481 0%, #6d0b62 100%);
  --grad-cap-3: linear-gradient(180deg, #c11789 0%, #7d0d70 100%);
  --grad-cap-4: linear-gradient(180deg, #a3128c 0%, #4d0552 100%);
  --grad-cap-5: linear-gradient(180deg, #7f0f78 0%, #3e0442 100%);
  --grad-cap-6: linear-gradient(180deg, #5d0660 0%, #2e0047 100%);

  /* ── Neutral ink ramp (cool-neutral, from Roots) ─────────────────── */
  --ink-0:      #0a0a09;
  --ink-1:      #272621;      /* text/primary — Roots authoritative */
  --ink-2:      #3a3934;
  --ink-3:      #504f49;      /* text/secondary — Roots authoritative */
  --ink-4:      #706f6a;
  --ink-5:      #9d9c97;
  --ink-muted:  #c5c4bf;

  /* ── Surfaces ────────────────────────────────────────────────────── */
  --bg:         #ffffff;      /* bg/surface · bg/sidebar */
  --bg-soft:    #fafafa;      /* near-white neutral (not warm cream) */
  --bg-tint:    #f5f5f4;      /* alternating section — cool neutral */
  --bg-wash:    #eeeeec;
  --bg-dark:    var(--purple-900);
  --bg-dark-2:  #1f0436;

  --line:       #e4e4e2;      /* border/default — Roots authoritative */
  --line-soft:  #ececea;
  --line-hard:  #c5c4bf;

  /* ── Semantic aliases (match Figma Color collection names) ───────── */
  --color-text-primary:     var(--ink-1);
  --color-text-secondary:   var(--ink-3);
  --color-text-link:        var(--purple-500);
  --color-text-brand:       var(--purple-800);
  --color-text-on-brand:    #ffffff;
  --color-text-light:       var(--ink-5);

  --color-bg-surface:       var(--bg);
  --color-bg-sidebar:       var(--bg);
  --color-bg-brand-subtle:  var(--purple-100);

  --color-border-default:   var(--line);
  --color-border-brand:     var(--purple-500);

  /* ── Strategic roles (kept for existing call sites) ──────────────── */
  --accent:        var(--purple-500);
  --accent-hover:  var(--purple-700);
  --accent-ink:    var(--purple-800);
  --accent-soft:   var(--purple-100);
  --accent-wash:   var(--purple-50);

  --highlight:     var(--cyan-700);
  --highlight-soft:var(--cyan-soft);

  --alert:         var(--ember-500);
  --alert-soft:    #fdece4;

  /* ── Type scale ──────────────────────────────────────────────────── */
  /* Adelle / Adelle Sans is the Yggdrasil Roots official typeface, but it is
     a paid font that isn't bundled with the microsite. Web-safe fallbacks
     (Lora for serif display, Source Sans 3 for sans body) carry the visual
     intent without shipping a license-restricted font. If Adelle is ever
     self-hosted via @font-face, prepend it to both stacks. */
  --f-display:  "Newsreader", Georgia, "Times New Roman", serif;
  --f-sans:     "Source Sans 3", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --f-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid display scale */
  --fs-eyebrow: 12px;
  --fs-body:    17px;
  --fs-body-lg: 19px;
  --fs-lead:    clamp(18px, 1.3vw + 12px, 22px);
  --fs-h3:      clamp(22px, 1.4vw + 14px, 28px);
  --fs-h2:      clamp(34px, 3vw + 16px, 56px);
  --fs-h1:      clamp(40px, 4vw + 14px, 64px);
  --fs-display: clamp(48px, 4.6vw + 12px, 76px);

  /* ── Spacing rhythm ──────────────────────────────────────────────── */
  --wrap-max:  1200px;
  --wrap-wide: 1320px;
  --wrap-narrow: 880px;
  --gutter:    32px;
  --section-y: clamp(72px, 8vw, 144px);
  --stack-xs:  8px;
  --stack-sm:  12px;
  --stack:     16px;
  --stack-md:  24px;
  --stack-lg:  40px;
  --stack-xl:  64px;
  --stack-2xl: 96px;

  /* ── Shape ───────────────────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Elevation (Apple-subtle) ────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(15, 13, 11, 0.04), 0 2px 8px rgba(15, 13, 11, 0.03);
  --shadow-2: 0 2px 4px rgba(15, 13, 11, 0.05), 0 8px 28px rgba(15, 13, 11, 0.06);
  --shadow-3: 0 4px 12px rgba(15, 13, 11, 0.08), 0 24px 64px rgba(15, 13, 11, 0.12);
  --shadow-glow: 0 0 0 1px rgba(152, 19, 156, 0.08), 0 8px 32px rgba(152, 19, 156, 0.12);

  /* ── Motion tokens ───────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.2, 0.65, 0.2, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-soft:  cubic-bezier(0.3, 0, 0.2, 1);
  --ease-back:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-quick: 180ms;
  --dur-base:  360ms;
  --dur-slow:  720ms;
  --dur-scroll: 800ms;

  /* ── Z index ─────────────────────────────────────────────────────── */
  --z-nav: 60;
  --z-modal: 100;
  --z-toast: 120;
}

/* ── Accent variants (Tweaks panel) ───────────────────────────────── */
body[data-accent="indigo"] {
  --accent: #3238a3;
  --accent-hover: #1d215f;
  --accent-ink: #141741;
  --accent-soft: #e0e2f5;
  --accent-wash: #f2f3fb;
  --purple-500: #3b4dc9;
  --purple-600: #3238a3;
  --purple-700: #1d215f;
  --purple-800: #141741;
}
body[data-accent="forest"] {
  --accent: #2b8a4a;
  --accent-hover: #1e6b3a;
  --accent-ink: #0e3e1f;
  --accent-soft: #dcebdc;
  --accent-wash: #f0f7ee;
  --purple-500: #2b8a4a;
  --purple-600: #1e6b3a;
  --purple-700: #0e3e1f;
  --purple-800: #072413;
}
body[data-accent="ink"] {
  --accent: #2b2b2b;
  --accent-hover: #1a1a1a;
  --accent-ink: #0a0a0a;
  --accent-soft: #ecece9;
  --accent-wash: #f6f6f4;
  --purple-500: #2b2b2b;
  --purple-600: #1a1a1a;
  --purple-700: #0a0a0a;
  --purple-800: #000000;
}

body[data-type="grotesque"] {
  --f-display: var(--f-sans);
}

body[data-density="compact"] {
  --section-y: clamp(56px, 6vw, 96px);
  --fs-body: 16px;
}

body[data-decisions="hide"] .dec-mark { display: none; }

/* Respect reduced motion — documented in motion.css */