/* ============================================================
   Scree Design Tokens — "Alpine Daylight"
   Hand-tuned for this demo: bone canvas, pine ink, amber signal.
   ============================================================ */

:root {
  /* ---- Palette -------------------------------------------- */
  --bg:            #ecefe8;          /* cool bone canvas        */
  --bg-elevated:   #f7f8f4;          /* raised surfaces         */
  --surface:       rgba(20,32,26,0.05);
  --surface-2:     rgba(20,32,26,0.08);
  --hairline:      rgba(20,32,26,0.12);
  --hairline-2:    rgba(20,32,26,0.20);

  --ink:           #14201a;          /* pine-black text         */
  --ink-soft:      rgba(20,32,26,0.74);
  --ink-mute:      rgba(20,32,26,0.52);

  /* Brand accents — pine green + amber signal
     (variable names kept from the base system for compatibility) */
  --violet:        #1e6b4f;          /* pine (primary accent)   */
  --violet-hi:     #2e8a68;
  --cyan:          #d97b2b;          /* amber (signal)          */
  --cyan-hi:       #a8571a;          /* amber, dark enough on bone */
  --accent:        var(--violet);

  /* ---- Gradients ------------------------------------------ */
  --grad-brand:    linear-gradient(120deg, #175640 0%, #2e8a68 100%);
  --grad-text:     linear-gradient(120deg, #14201a 0%, #175640 45%, #2e8a68 100%);
  --grad-halo:     radial-gradient(60% 60% at 50% 0%, rgba(30,107,79,0.14) 0%, rgba(217,123,43,0.05) 45%, transparent 72%);
  --grad-sheen:    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 40%);

  /* ---- Typography ----------------------------------------- */
  --font-sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "JetBrains 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.21rem, 2.90rem + 6.55vw, 9.00rem);

  --tracking-tight: -0.035em;
  --tracking-wide:  0.18em;
  --leading-tight:  1.02;
  --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 — tighter, gear-like ------------------------- */
  --r-s:  8px;
  --r-m:  14px;
  --r-l:  20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows & glows ------------------------------------ */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 44px -22px rgba(20,32,26,0.35);
  --shadow-float: 0 36px 80px -32px rgba(20,32,26,0.4);
  --glow-violet: 0 12px 34px -14px rgba(23,86,64,0.5);
  --glow-cyan:   0 12px 34px -14px rgba(168,87,26,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; }
}