/* ============================================================
   ORBIT — DNA / DESIGN TOKENS  (brand-kit layer)
   The single source of truth every other layer inherits.
   Essence: one center of gravity. Everything in your orbit.
   Personality: fast, powerful, confident, precise.
   ============================================================ */

:root {
  /* ---- SPACE (neutral ramp, deep-space indigo-black) ---- */
  --space-950: #05070F;
  --space-900: #070A14;   /* page background */
  --space-880: #0A0E1C;
  --space-850: #0C1122;   /* raised surface */
  --space-820: #10152A;   /* tile surface */
  --space-780: #151B33;   /* tile surface, elevated */
  --space-720: #1B2240;   /* hairline / border strong */
  --line:      #232A48;   /* default hairline border */
  --line-soft: #191F3A;

  /* ---- BRAND ---- */
  --violet:        #7C3AED;   /* $PRIMARY — fills, CTA base */
  --violet-bright: #8B5CFF;   /* glows, gradients */
  --violet-hi:     #A78BFA;   /* light violet on dark */
  --cyan:          #22D3EE;   /* $ACCENT — links, signal */
  --cyan-soft:     #67E8F9;
  --cyan-deep:     #0891B2;

  /* ---- TEXT ---- */
  --text:       #EAECF7;   /* primary text */
  --text-mid:   #B6BEDC;   /* secondary */
  --text-muted: #8A93B8;   /* tertiary / captions (AA on --space-900) */
  --text-faint: #5B638A;   /* faint labels */
  --on-accent:  #05070F;   /* text on bright cyan fills */

  /* ---- STATUS ---- */
  --ok:     #34D399;
  --warn:   #FBBF24;
  --danger: #FB7185;

  /* ---- GRADIENTS + GLOW ---- */
  --grad-brand: linear-gradient(120deg, var(--violet-bright) 0%, var(--cyan) 100%);
  --grad-brand-soft: linear-gradient(120deg, color-mix(in srgb, var(--violet-bright) 22%, transparent), color-mix(in srgb, var(--cyan) 22%, transparent));
  --grad-core: radial-gradient(circle at 50% 45%, var(--cyan-soft) 0%, var(--violet-bright) 34%, transparent 72%);
  --glow-violet: 0 0 0 1px color-mix(in srgb, var(--violet-bright) 40%, transparent), 0 18px 60px -18px color-mix(in srgb, var(--violet) 70%, transparent);
  --glow-cyan:   0 0 40px -6px color-mix(in srgb, var(--cyan) 55%, transparent);

  /* ---- TYPE ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-text:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* fluid modular scale (1.25 display) */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.22vw, 1.06rem);
  --step-1:  clamp(1.18rem, 1.08rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.55rem + 2.1vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.6rem);
  --step-5:  clamp(3.4rem, 2.2rem + 6vw, 7rem);
  --step-6:  clamp(4rem, 2rem + 10vw, 11rem);   /* oversized-type-as-graphic */

  /* ---- SPACE SCALE (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px;

  /* ---- RADIUS / SHADOW ---- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow:    0 12px 34px -14px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 40px 90px -36px rgb(0 0 0 / 0.75);

  /* ---- MOTION (signature: precise, quick attack, eased settle) ---- */
  --t-fast: 0.14s;
  --t:      0.28s;
  --t-slow: 0.6s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- LAYOUT ---- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 72px);
  --ring: color-mix(in srgb, var(--cyan) 60%, transparent);
}

/* Light theme is derived (proves the palette both ways) — used by the brand toggle */
:root[data-theme="light"] {
  --space-950: #EEF1FB;
  --space-900: #F5F7FE;
  --space-880: #EDF0FB;
  --space-850: #FFFFFF;
  --space-820: #FFFFFF;
  --space-780: #F7F9FF;
  --space-720: #DDE3F5;
  --line:      #D5DCF0;
  --line-soft: #E4E9F7;
  --text:       #0C1024;
  --text-mid:   #333B5C;
  --text-muted: #545C7E;
  --text-faint: #8A93B8;
  --on-accent:  #05070F;
  --violet:        #6D28D9;
  --shadow:    0 12px 34px -16px rgb(20 24 60 / 0.22);
  --shadow-lg: 0 40px 90px -40px rgb(20 24 60 / 0.30);
}