/* ============================================================
   SUMMON v2.0 tokens. Light canonical, dark derived.
   Closed vocabulary: if a value is not here, it does not ship.
   ============================================================ */

:root {
  /* ---------- primitives: the Summon Blue family ---------- */
  --blue-050: #EEF5FF;
  --blue-100: #DCEBFF;
  --blue-200: #B9D6FF;
  --blue-300: #8AB9FF;
  --blue-400: #5395FF;
  --blue-500: #2B78FF;
  --blue-600: #0B5FFF; /* Summon Blue */
  --blue-700: #084DDB;
  --blue-800: #0640B4;
  --blue-900: #093180;
  --navy-950: #071F4D; /* deep ink: sections, gradient anchor, shadow key */
  --ink:      #0C1428;

  /* ---------- semantic: surfaces ---------- */
  --bg-canvas: #F7FAFF;
  --bg-elevated: #FFFFFF;
  --bg-neutral: rgba(7, 31, 77, 0.06);
  --bg-neutral-hover: rgba(7, 31, 77, 0.10);
  --bg-neutral-active: rgba(7, 31, 77, 0.15);
  --bg-accent-quiet: var(--blue-050);
  --bg-section-tint: var(--blue-050);
  --bg-section-deep: var(--navy-950);

  /* ---------- semantic: text ---------- */
  --text-primary: #0C1428;
  --text-secondary: #46506B;
  --text-tertiary: #6B7590;
  --text-disabled: rgba(12, 20, 40, 0.35);
  --text-on-accent: #FFFFFF;
  --text-accent: var(--blue-700);

  /* ---------- semantic: borders ---------- */
  --border-neutral: rgba(12, 20, 40, 0.12);
  --border-strong: rgba(12, 20, 40, 0.22);
  --border-accent: rgba(11, 95, 255, 0.35);
  --border-focus: var(--blue-600);

  /* ---------- interactive triads ---------- */
  --action-primary: var(--blue-600);
  --action-primary-hover: var(--blue-700);
  --action-primary-active: var(--blue-800);
  --action-quiet: var(--blue-050);
  --action-quiet-hover: var(--blue-100);
  --action-quiet-active: var(--blue-200);
  --action-neutral: var(--bg-neutral);
  --action-neutral-hover: var(--bg-neutral-hover);
  --action-neutral-active: var(--bg-neutral-active);

  /* ---------- sentiment (dark content on pale tint) ---------- */
  --positive-content: #0A5C38;
  --positive-bg: #E2F6EB;
  --negative-content: #C8232E;
  --negative-bg: #FDEBEC;
  --warning-content: #6B4E0A;
  --warning-bg: #FFF4D6;
  --info-content: var(--blue-700);
  --info-bg: var(--blue-050);

  /* ---------- shadows (navy-keyed, never black) ---------- */
  --shadow-xs: 0 1px 3px rgba(7, 31, 77, 0.07);
  --shadow-sm: 0 2px 8px rgba(7, 31, 77, 0.08), 0 1px 3px rgba(7, 31, 77, 0.05);
  --shadow-md: 0 6px 20px rgba(7, 31, 77, 0.10), 0 2px 6px rgba(7, 31, 77, 0.05);
  --shadow-lg: 0 16px 40px rgba(7, 31, 77, 0.12), 0 6px 16px rgba(7, 31, 77, 0.06);
  --shadow-hero: 0 24px 80px rgba(7, 31, 77, 0.16), 0 8px 32px rgba(7, 31, 77, 0.08);

  /* ---------- glass (nav only) ---------- */
  --glass-bg: rgba(247, 250, 255, 0.72);
  --glass-blur: 20px;
  --glass-border: rgba(12, 20, 40, 0.08);

  /* ---------- typography ---------- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --text-display-1: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
  --text-display-2: clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-title-section: 1.75rem;
  --text-title-card: 1.25rem;
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-label: 0.8125rem;
  --text-overline: 0.75rem;
  --text-metric: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);

  --leading-display: 1.0;
  --leading-title: 1.15;
  --leading-body: 1.55;
  --tracking-display: -0.03em;
  --tracking-title: -0.02em;
  --tracking-body: -0.006em;
  --tracking-label: 0.01em;
  --tracking-overline: 0.08em;

  /* ---------- spacing (8-grid, 4px fine grain) ---------- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px; --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px; --space-40: 160px;

  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;   /* default button + input */
  --control-xl: 56px;   /* hero CTA */
  --content-max: 1200px;

  /* ---------- radii ---------- */
  --radius-input: 10px;
  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-pill: 9999px;

  /* ---------- motion ---------- */
  --ease-summon: cubic-bezier(0.62, 0.18, 0.12, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.55, 0.6, 1);
  --duration-micro: 120ms;
  --duration-hover: 200ms;
  --duration-panel: 320ms;
  --duration-section: 600ms;

  /* ---------- EKG heartbeat ---------- */
  --ekg-stroke: var(--blue-600);
  --ekg-stroke-width: 2px;
  --ekg-glow: drop-shadow(0 0 6px rgba(11, 95, 255, 0.35));
  --ekg-cycle: 2400ms;
  --ekg-static-stroke: var(--border-strong);

  /* ---------- gradients (see recipes for budget rules) ---------- */
  --gradient-hero-wash: radial-gradient(140% 90% at 50% 0%,
    #DCEBFF 0%, #EEF5FF 42%, #F7FAFF 78%);
  --gradient-horizon: radial-gradient(120% 100% at 50% 104%,
    #0B5FFF 0%, #4D8DFF 12%, #A9CCFF 32%, #DCEBFF 50%, #F7FAFF 68%);
  --gradient-cta: linear-gradient(180deg, #2B78FF 0%, #0B5FFF 100%);
  --gradient-cta-hover: linear-gradient(180deg, #1E6CF2 0%, #084DDB 100%);
  --gradient-scrim: linear-gradient(180deg,
    rgba(7, 31, 77, 0.55) 0%, rgba(7, 31, 77, 0.25) 45%, rgba(7, 31, 77, 0) 80%);
  --mask-edge-fade: linear-gradient(90deg,
    transparent 0%, #000 12%, #000 88%, transparent 100%);

  color-scheme: light;
}

/* ============================================================
   Deep-navy section flip (light mode only): token remap,
   components drop in unchanged. Max one per page.
   ============================================================ */
[data-section="deep"] {
  --bg-canvas: var(--navy-950);
  --bg-elevated: #0B2A63;
  --bg-neutral: rgba(255, 255, 255, 0.06);
  --bg-neutral-hover: rgba(255, 255, 255, 0.10);
  --bg-neutral-active: rgba(255, 255, 255, 0.15);
  --text-primary: #EEF2FA;
  --text-secondary: #B9C6E4;
  --text-tertiary: #8A9AC4;
  --text-accent: #8AB9FF;
  --border-neutral: rgba(255, 255, 255, 0.16);
  --border-strong: rgba(255, 255, 255, 0.28);
  --ekg-stroke: var(--blue-400);
}

/* ============================================================
   DERIVED DARK THEME. Re-pointed tokens only, no new design.
   ============================================================ */
[data-theme="dark"] {
  --bg-canvas: #0A1120;
  --bg-elevated: #111B33;
  --bg-neutral: rgba(255, 255, 255, 0.06);
  --bg-neutral-hover: rgba(255, 255, 255, 0.10);
  --bg-neutral-active: rgba(255, 255, 255, 0.15);
  --bg-accent-quiet: rgba(11, 95, 255, 0.16);
  --bg-section-tint: #0D1528;
  --bg-section-deep: #0A1120; /* deep flip is a no-op in dark */

  --text-primary: #EEF2FA;
  --text-secondary: #A9B4CE;
  --text-tertiary: #77829F;
  --text-disabled: rgba(238, 242, 250, 0.35);
  --text-on-accent: #FFFFFF;
  --text-accent: #7FB0FF;

  --border-neutral: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.26);
  --border-accent: rgba(83, 149, 255, 0.45);
  --border-focus: var(--blue-400);

  --action-primary: var(--blue-400);
  --action-primary-hover: #7FB0FF;
  --action-primary-active: #A5C6FF;
  --action-quiet: rgba(11, 95, 255, 0.16);
  --action-quiet-hover: rgba(11, 95, 255, 0.24);
  --action-quiet-active: rgba(11, 95, 255, 0.32);

  --positive-content: #6EE7A8;
  --positive-bg: rgba(16, 122, 74, 0.22);
  --negative-content: #FF8B93;
  --negative-bg: rgba(200, 35, 46, 0.22);
  --warning-content: #F5D06B;
  --warning-bg: rgba(107, 78, 10, 0.28);
  --info-content: #8AB9FF;
  --info-bg: rgba(11, 95, 255, 0.16);

  /* shadows: replaced by surface lightening; hero only */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-hero: 0 24px 80px rgba(0, 0, 0, 0.5);

  --glass-bg: rgba(10, 17, 32, 0.72);
  --glass-border: rgba(255, 255, 255, 0.10);

  --ekg-stroke: var(--blue-400);
  --ekg-glow: drop-shadow(0 0 6px rgba(83, 149, 255, 0.45));
  --ekg-static-stroke: rgba(255, 255, 255, 0.26);

  --gradient-hero-wash: radial-gradient(140% 90% at 50% 0%,
    rgba(11, 95, 255, 0.14) 0%, rgba(11, 95, 255, 0.05) 42%, #0A1120 78%);
  --gradient-horizon: radial-gradient(120% 100% at 50% 104%,
    rgba(11, 95, 255, 0.55) 0%, rgba(83, 149, 255, 0.30) 18%,
    rgba(83, 149, 255, 0.10) 42%, #0A1120 72%);
  --gradient-cta: linear-gradient(180deg, #3B82FF 0%, #1E6CF2 100%);
  --gradient-cta-hover: linear-gradient(180deg, #5395FF 0%, #2B78FF 100%);
  --gradient-scrim: linear-gradient(180deg,
    rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 80%);

  color-scheme: dark;
}

/* ============================================================
   Reduced motion: opacity-only, EKG renders complete + static.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 1ms;
    --duration-hover: 1ms;
    --duration-panel: 1ms;
    --duration-section: 1ms;
    --ekg-cycle: 0ms;
    --ekg-glow: none;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .ekg-trace {
    stroke-dashoffset: 0 !important; /* full static trace, no drawing */
  }
}