/* ─────────────────────────────────────────────────────────
   Stack Design System — Foundations
   Colors, typography, spacing, radii, shadows, semantic vars
   ───────────────────────────────────────────────────────── */

/* Google Fonts: Inter (display), Geist + Geist Mono (product), Archivo (editorial) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Archivo:wght@400;500;600;700&display=swap');

:root {
  /* ── Primitive colors ── */
  --stack-orange:        #F37E4D;
  --stack-orange-deep:   #EB652B;
  --stack-orange-cream:  #FFEFE8;

  --ink:                 #000000;
  --graphite:            #231F20;
  --grey-700:            #4a4a4a;
  --grey-500:            #6B6558;
  --grey-300:            #B3ADA2;
  --hair:                #F1F1F1;
  --cream-1:             #FFF5D9;
  --cream-2:             #FAF3DF;
  --white:               #FFFFFF;

  --purple:              #A863FF;
  --lavender:            #EADBFD;
  --blue:                #2A79FF;
  --lime:                #B0FF6F;
  --yellow:              #F0FC81;
  --cyan:                #00E8F0;
  --red-alert:           #FF294D;

  /* ── Semantic colors ── */
  --fg-1:                var(--ink);        /* primary text */
  --fg-2:                var(--graphite);   /* body text */
  --fg-3:                var(--grey-500);   /* secondary / meta */
  --fg-accent:           var(--stack-orange);
  --fg-accent-strong:    var(--stack-orange-deep);
  --fg-on-accent:        var(--white);
  --fg-on-dark:          var(--white);

  --bg-page:             var(--cream-2);
  --bg-surface:          var(--white);
  --bg-dark:             var(--ink);
  --bg-accent:           var(--stack-orange);
  --bg-accent-soft:      var(--stack-orange-cream);
  --bg-muted:            var(--hair);

  --border-hair:         var(--hair);
  --border-strong:       var(--ink);

  /* ── Typography ── */
  --font-display:        "Inter", "Helvetica Neue", sans-serif;
  --font-sans:           "Geist", "Inter", system-ui, sans-serif;
  --font-mono:           "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-editorial:      "Archivo", "Inter", sans-serif;

  --fs-display-xl:       clamp(64px, 10vw, 160px);
  --fs-display-lg:       clamp(48px, 7vw, 96px);
  --fs-h1:               clamp(36px, 5vw, 64px);
  --fs-h2:               clamp(28px, 3.5vw, 44px);
  --fs-h3:               22px;
  --fs-body-lg:          18px;
  --fs-body:             15px;
  --fs-body-sm:          13px;
  --fs-mono:             12px;
  --fs-mono-sm:          10.5px;

  --lh-tight:            0.95;
  --lh-snug:             1.15;
  --lh-normal:           1.5;
  --lh-loose:            1.6;

  --tr-tight:            -0.035em;
  --tr-snug:             -0.02em;
  --tr-normal:           0;
  --tr-loose:            0.08em;
  --tr-wide:             0.12em;

  /* ── Spacing (8-based) ── */
  --space-1:             4px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-5:             20px;
  --space-6:             24px;
  --space-8:             32px;
  --space-10:            40px;
  --space-12:            48px;
  --space-16:            64px;
  --space-20:            80px;
  --space-24:            96px;

  /* ── Radii ── */
  --radius-xs:           4px;
  --radius-sm:           8px;
  --radius-md:           14px;
  --radius-lg:           22px;
  --radius-xl:           40px;
  --radius-card:         80px;  /* signature Stack outer radius */
  --radius-pill:         9999px;

  /* ── Shadows / elevation ── */
  --shadow-1:            0 1px 2px rgba(0,0,0,0.04);
  --shadow-2:            0 6px 20px -6px rgba(0,0,0,0.12);
  --shadow-3:            0 24px 60px -24px rgba(0,0,0,0.25);
  --shadow-accent:       0 10px 24px -10px rgba(235,101,43,0.55);

  /* ── Motion ── */
  --ease-out:            cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:            120ms;
  --dur-base:            200ms;
  --dur-slow:            400ms;
}

/* ── Semantic type classes (portable) ── */
.type-display-xl { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.type-display-lg { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.type-h1         { font-family: var(--font-sans);    font-weight: 600; font-size: var(--fs-h1);        line-height: var(--lh-snug);  letter-spacing: var(--tr-snug); }
.type-h2         { font-family: var(--font-sans);    font-weight: 600; font-size: var(--fs-h2);        line-height: var(--lh-snug);  letter-spacing: var(--tr-snug); }
.type-h3         { font-family: var(--font-sans);    font-weight: 600; font-size: var(--fs-h3);        line-height: var(--lh-snug);  letter-spacing: -0.01em; }
.type-body-lg    { font-family: var(--font-sans);    font-weight: 400; font-size: var(--fs-body-lg);   line-height: var(--lh-normal); }
.type-body       { font-family: var(--font-sans);    font-weight: 400; font-size: var(--fs-body);      line-height: var(--lh-normal); }
.type-body-sm    { font-family: var(--font-sans);    font-weight: 400; font-size: var(--fs-body-sm);   line-height: var(--lh-normal); }
.type-mono       { font-family: var(--font-mono);    font-weight: 500; font-size: var(--fs-mono);      letter-spacing: var(--tr-wide); text-transform: uppercase; }
.type-mono-sm    { font-family: var(--font-mono);    font-weight: 500; font-size: var(--fs-mono-sm);   letter-spacing: var(--tr-wide); text-transform: uppercase; }
.type-editorial  { font-family: var(--font-editorial); font-weight: 700; letter-spacing: var(--tr-tight); }

/* Generic body reset for design-system pages */
body.ds-page {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}