/* ==========================================================================
   tokens.css — Design tokens for LOPE Solutions
   The single source of truth for color, type, spacing, and motion.
   Every other stylesheet derives its values from here.
   ========================================================================== */

:root {
  /* --- Color -------------------------------------------------------------
     Grounded in the brand: a "lope" is an easy, steady forward gait.
     Deep pine carries calm technical confidence; signal coral marks the
     live, moving, attention-worthy moments (telemetry, CTAs). */
  --ink:        #0C1512;   /* near-black with a green undertone — primary text */
  --pine:       #115E4C;   /* primary brand */
  --pine-deep:  #0A3A2F;   /* dark sections, footer */
  --pine-soft:  #1C7A63;   /* hover / lighter brand */
  --mist:       #F3F5F1;   /* light page surface */
  --paper:      #FFFFFF;   /* cards on mist */
  --signal:     #FF6A3D;   /* live accent / call to action */
  --signal-deep:#E5572C;   /* signal hover */
  --sage:       #8FA89E;   /* muted text, hairlines */
  --sage-soft:  #C7D4CD;   /* subtle borders on light */

  /* Semantic aliases — components reference these, not raw hues */
  --bg:            var(--mist);
  --surface:       var(--paper);
  --text:          var(--ink);
  --text-muted:    #4A5A53;
  --text-faint:    var(--sage);
  --brand:         var(--pine);
  --accent:        var(--signal);
  --line:          var(--sage-soft);
  --line-strong:   #B4C4BC;

  /* --- Type --------------------------------------------------------------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --step--1: clamp(0.81rem, 0.78rem + 0.15vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.34rem + 0.8vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 3rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.5vw, 4.2rem);
  --step-5:  clamp(3rem, 2.2rem + 4vw, 5.8rem);

  /* --- Spacing (8px base rhythm) ----------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* --- Layout ------------------------------------------------------------- */
  --container:   1200px;
  --container-narrow: 760px;
  --gutter:      clamp(1.25rem, 5vw, 4rem);

  /* --- Radii & borders ---------------------------------------------------- */
  --radius-s:  6px;
  --radius-m:  12px;
  --radius-l:  20px;
  --radius-pill: 999px;
  --border:    1px solid var(--line);

  /* --- Elevation ---------------------------------------------------------- */
  --shadow-s: 0 1px 2px rgba(12, 21, 18, 0.05);
  --shadow-m: 0 8px 24px -12px rgba(12, 21, 18, 0.18);
  --shadow-l: 0 24px 60px -24px rgba(12, 21, 18, 0.28);

  /* --- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 520ms;
}