/* ============================================================
   FluxFront — Design Tokens
   Warm Editorial · light-mode default · teal accent system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Surface & ink ------------------------------------- */
  --cream:        #FDFBF7;   /* page background           */
  --surface:      #F7F4ED;   /* cards / subtle sections   */
  --surface-2:    #F1ECE1;   /* deeper recessed surfaces  */
  --ink:          #1E2229;   /* primary text / mark       */
  --ink-2:        #5E6671;   /* secondary text            */
  --ink-3:        #8A909B;   /* tertiary / captions       */
  --hairline:     #E5E2DA;   /* borders                   */
  --hairline-2:   #D8D4C8;   /* stronger borders          */
  --paper-shadow: 30 34 41;  /* rgb for shadow mixing     */

  /* ---- Teal accent scale --------------------------------- */
  --teal:         #2DD4BF;   /* brand accent / slash      */
  --teal-bright:  #34E7CF;   /* glow / highlight          */
  --teal-600:     #14B8A6;   /* mid emphasis              */
  --teal-700:     #0F766E;   /* deep — text on cream      */
  --teal-800:     #115E56;   /* deepest                   */
  --teal-wash:    #E4F7F3;   /* tinted surface            */
  --teal-wash-2:  #D2F1EA;

  /* ---- Functional ---------------------------------------- */
  --good:         #16A34A;
  --good-wash:    #E7F5EC;
  --warn:         #D97706;
  --warn-wash:    #FBF0DE;
  --bad:          #DC2626;
  --bad-wash:     #FBE9E9;

  /* ---- Dark band (footer / final CTA) -------------------- */
  --ink-deep:     #16191F;
  --ink-panel:    #20242C;
  --ink-line:     #2E333C;

  /* ---- Type ---------------------------------------------- */
  --font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* fluid type scale */
  --t-display:  clamp(3.1rem, 1.4rem + 6vw, 6.1rem);
  --t-h1:       clamp(2.45rem, 1.3rem + 3.9vw, 4.1rem);
  --t-h2:       clamp(2.05rem, 1.25rem + 2.7vw, 3.35rem);
  --t-h3:       clamp(1.5rem, 1.15rem + 1.3vw, 2.05rem);
  --t-lead:     clamp(1.2rem, 1.04rem + 0.7vw, 1.55rem);
  --t-body:     1.18rem;
  --t-sm:       0.9375rem;
  --t-xs:       0.8125rem;
  --t-mono-lbl: 0.75rem;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.62;
  --ls-tight:   -0.022em;
  --ls-tighter: -0.035em;
  --ls-label:   0.14em;

  /* ---- Spacing (8pt base) -------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;
  --gutter: clamp(20px, 4.5vw, 84px);
  --maxw: 1700px;
  --maxw-narrow: 760px;

  /* ---- Radii --------------------------------------------- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;
  --r-lg: 20px; --r-xl: 28px;  --r-pill: 999px;

  /* ---- Shadow -------------------------------------------- */
  --sh-xs: 0 1px 2px rgb(var(--paper-shadow) / 0.05);
  --sh-sm: 0 1px 3px rgb(var(--paper-shadow) / 0.06), 0 1px 2px rgb(var(--paper-shadow) / 0.04);
  --sh-md: 0 4px 14px rgb(var(--paper-shadow) / 0.07), 0 2px 5px rgb(var(--paper-shadow) / 0.05);
  --sh-lg: 0 18px 44px rgb(var(--paper-shadow) / 0.11), 0 6px 14px rgb(var(--paper-shadow) / 0.06);
  --sh-xl: 0 34px 70px rgb(var(--paper-shadow) / 0.16), 0 12px 24px rgb(var(--paper-shadow) / 0.08);
  --sh-teal: 0 10px 30px rgb(45 212 191 / 0.34);

  /* ---- Motion -------------------------------------------- */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-1: 120ms;  --d-2: 200ms;  --d-3: 320ms;  --d-4: 520ms;
}