/* =====================================================================
   HASTE — Design Tokens
   The single source of truth for color, type, spacing, motion & shape.
   Edit values here; every component reads from these variables.
   ===================================================================== */

:root {
  /* --- Color: surfaces ------------------------------------------------ */
  --bg:            #08090A;   /* page base — near black */
  --bg-1:          #0D0F11;   /* raised surface */
  --bg-2:          #131619;   /* cards */
  --bg-3:          #191D21;   /* hover / inset */
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.16);

  /* --- Color: text ---------------------------------------------------- */
  --text:          #F4F6F5;   /* primary */
  --text-dim:      #AEB4B9;   /* secondary */
  --muted:         #7C8388;   /* tertiary / captions */
  --muted-2:       #565C61;   /* faintest */

  /* --- Color: signal accent (speed / execution) ---------------------- */
  --accent:        #C8FF4D;   /* electric lime — the signal color */
  --accent-press:  #B2F02C;
  --accent-ink:    #0A0C05;   /* text that sits on accent */
  --accent-soft:   rgba(200, 255, 77, 0.12);
  --accent-line:   rgba(200, 255, 77, 0.30);
  --accent-glow:   rgba(200, 255, 77, 0.45);

  /* --- Color: tension (problem section) ------------------------------ */
  --warn:          #FF6B4A;   /* friction / status-red */
  --warn-soft:     rgba(255, 107, 74, 0.10);

  /* --- Gradients ------------------------------------------------------ */
  --grad-accent:   linear-gradient(120deg, #E6FF8A 0%, #C8FF4D 45%, #84E000 100%);
  --grad-text:     linear-gradient(180deg, #FFFFFF 0%, #B9BFC2 130%);

  /* --- Typography ----------------------------------------------------- */
  --font-display:  "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:     "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:     "Space Mono", ui-monospace, "Cascadia Code", monospace;

  /* Fluid type scale (min @360px → max @1440px) */
  --fs-eyebrow:    clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  --fs-body-sm:    clamp(0.85rem, 0.82rem + 0.2vw, 0.94rem);
  --fs-body:       clamp(0.98rem, 0.94rem + 0.3vw, 1.12rem);
  --fs-lead:       clamp(1.1rem, 1rem + 0.7vw, 1.4rem);
  --fs-h4:         clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem);
  --fs-h3:         clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
  --fs-h2:         clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --fs-h1:         clamp(2.6rem, 1.7rem + 4.4vw, 5.4rem);
  --fs-display:    clamp(3rem, 1.6rem + 6.6vw, 7rem);

  --lh-tight:      1.04;
  --lh-snug:       1.18;
  --lh-body:       1.62;

  /* --- Spacing scale (8px base) -------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* Section rhythm (fluid) */
  --section-y:     clamp(4.5rem, 3rem + 7vw, 9rem);
  --container:     1200px;
  --container-wide:1320px;
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* --- Shape ---------------------------------------------------------- */
  --r-sm:   10px;
  --r:      16px;
  --r-lg:   22px;
  --r-xl:   30px;
  --r-pill: 999px;

  /* --- Elevation & glow ---------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:     0 18px 40px -20px rgba(0, 0, 0, 0.7);
  --shadow-lg:  0 40px 80px -30px rgba(0, 0, 0, 0.85);
  --glow:       0 0 0 1px var(--accent-line), 0 20px 60px -18px var(--accent-glow);

  /* --- Motion --------------------------------------------------------- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);   /* expo-out, premium */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur:         320ms;
  --dur-slow:    640ms;

  /* --- Layering ------------------------------------------------------- */
  --z-bg:    0;
  --z-base:  1;
  --z-nav:   100;
  --z-modal: 200;

  color-scheme: dark;
}