/* ============================================================
   Ratchet Design Tokens — "Graphite Terminal"
   Hand-tuned for this demo: warm graphite dark, one green accent.
   ============================================================ */

:root {
  /* ---- Palette -------------------------------------------- */
  --bg:            #0a0d0b;          /* warm graphite canvas    */
  --bg-elevated:   #101512;          /* raised surfaces         */
  --surface:       rgba(236,244,239,0.04);
  --surface-2:     rgba(236,244,239,0.06);
  --hairline:      rgba(236,244,239,0.09);
  --hairline-2:    rgba(236,244,239,0.14);

  --ink:           #ecf4ef;          /* primary text            */
  --ink-soft:      rgba(236,244,239,0.72);
  --ink-mute:      rgba(236,244,239,0.48);

  /* Brand accent — one electric green, no second hue
     (variable names kept from the base system for compatibility) */
  --violet:        #1fae66;
  --violet-hi:     #34d17e;
  --cyan:          #7de8ab;
  --cyan-hi:       #a6f0c6;
  --accent:        var(--violet);

  /* ---- Gradients ------------------------------------------ */
  --grad-brand:    linear-gradient(120deg, #1fae66 0%, #6fe3a4 100%);
  --grad-text:     linear-gradient(120deg, #ffffff 0%, #a6f0c6 60%, #34d17e 110%);
  --grad-halo:     radial-gradient(60% 60% at 50% 0%, rgba(52,209,126,0.16) 0%, rgba(52,209,126,0.04) 45%, transparent 72%);
  --grad-sheen:    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 40%);

  /* ---- Typography ----------------------------------------- */
  --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.93rem + 0.34vw, 1.19rem);
  --step-1:  clamp(1.33rem, 1.19rem + 0.68vw, 1.78rem);
  --step-2:  clamp(1.78rem, 1.51rem + 1.30vw, 2.67rem);
  --step-3:  clamp(2.37rem, 1.92rem + 2.24vw, 4.00rem);
  --step-4:  clamp(3.16rem, 2.39rem + 3.83vw, 6.00rem);
  --step-5:  clamp(4.00rem, 2.80rem + 6.00vw, 8.20rem);

  --tracking-tight: -0.025em;
  --tracking-wide:  0.18em;
  --leading-tight:  1.05;
  --leading-body:   1.6;

  /* ---- Spacing (8px base, fluid) -------------------------- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  clamp(3rem, 2rem + 4vw, 5rem);
  --space-2xl: clamp(5rem, 3rem + 8vw, 9rem);
  --section-y: clamp(6rem, 4rem + 8vw, 11rem);

  --container:   1200px;
  --container-w: min(92vw, var(--container));

  /* ---- Radii — machined, compact -------------------------- */
  --r-s:  6px;
  --r-m:  10px;
  --r-l:  16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Shadows & glows ------------------------------------ */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.05) inset, 0 20px 50px -20px rgba(0,0,0,0.8);
  --shadow-float: 0 40px 90px -30px rgba(0,0,0,0.9);
  --glow-violet: 0 0 50px -12px rgba(52,209,126,0.45);
  --glow-cyan:   0 0 50px -12px rgba(52,209,126,0.35);

  /* ---- Motion --------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.35s;
  --dur-med:  0.6s;
  --dur-slow: 1s;

  /* ---- Z ---------------------------------------------------*/
  --z-nav: 100;
  --z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.001s; --dur-med: 0.001s; --dur-slow: 0.001s; }
}