/* =============================================================
   Glidework Design Tokens
   Colorado, across seasons. Earthy, warm, precise.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Geist:wght@300..800&family=Geist+Mono:wght@400..700&display=swap');

:root {
  /* ---------- Palette: Aspen Gold (primary, fall) ---------- */
  --gold-50:  #FBF3DE;
  --gold-100: #F6E4B4;
  --gold-200: #EFCF7E;
  --gold-300: #E5B855;
  --gold-400: #D9A441;   /* HERO */
  --gold-500: #BF8B2E;
  --gold-600: #9B6E20;
  --gold-700: #76521A;
  --gold-800: #543A15;
  --gold-900: #36240E;

  /* ---------- Palette: Spruce (secondary, summer) ---------- */
  --spruce-50:  #ECF1ED;
  --spruce-100: #CFDDD3;
  --spruce-200: #9DBAA5;
  --spruce-300: #6E9479;
  --spruce-400: #487057;
  --spruce-500: #2F5D4A;   /* HERO */
  --spruce-600: #244A3B;
  --spruce-700: #1B392D;
  --spruce-800: #122720;
  --spruce-900: #0B1A15;

  /* ---------- Palette: Sandstone (accent, rocky mtn) ---------- */
  --sandstone-50:  #F8E8DE;
  --sandstone-100: #EFCDB7;
  --sandstone-200: #E2A883;
  --sandstone-300: #D08458;
  --sandstone-400: #B8623A;   /* HERO */
  --sandstone-500: #9A4F2D;
  --sandstone-600: #7A3D22;
  --sandstone-700: #5B2D19;
  --sandstone-800: #401E10;
  --sandstone-900: #2A1308;

  /* ---------- Palette: Alpine (accent, winter shadow) ---------- */
  --alpine-50:  #E6ECF2;
  --alpine-100: #C2D1DF;
  --alpine-200: #8FA8C0;
  --alpine-300: #607F9D;
  --alpine-400: #3C5A7A;   /* HERO */
  --alpine-500: #2C4763;
  --alpine-600: #20374E;
  --alpine-700: #16273A;
  --alpine-800: #0D1A28;
  --alpine-900: #060F19;

  /* ---------- Palette: Scrub Oak (red, fall) ---------- */
  --oak-50:  #F6DDD3;
  --oak-100: #ECB6A2;
  --oak-200: #DC826A;
  --oak-300: #C45A41;
  --oak-400: #A23E29;   /* HERO */
  --oak-500: #82301F;
  --oak-600: #642416;
  --oak-700: #481A0F;
  --oak-800: #2E1108;
  --oak-900: #1B0904;

  /* ---------- Palette: Granite (warm gray neutrals) ---------- */
  --granite-50:  #F4F1EA;
  --granite-100: #E8E4DA;
  --granite-200: #D4CFC2;
  --granite-300: #B5AE9D;
  --granite-400: #8E8775;
  --granite-500: #6B6555;
  --granite-600: #4F4A3E;
  --granite-700: #3B3A38;   /* primary text */
  --granite-800: #28272A;
  --granite-900: #1A1A1C;
  --granite-950: #0F0F11;

  /* ---------- Foundation neutrals ---------- */
  --snow:        #FAF7F0;   /* page background */
  --snow-deep:   #F1ECDF;   /* alternating section */
  --ink:         var(--granite-900);

  /* ---------- Semantic ---------- */
  --bg:          var(--snow);
  --bg-alt:      var(--snow-deep);
  --surface:     #FFFFFF;
  --surface-alt: var(--granite-50);
  --fg-1:        var(--granite-900);   /* primary text */
  --fg-2:        var(--granite-700);   /* body */
  --fg-3:        var(--granite-500);   /* muted, meta */
  --fg-4:        var(--granite-400);   /* hint, disabled */
  --fg-on-dark:  var(--snow);
  --border:      var(--granite-200);
  --border-strong: var(--granite-300);

  --brand:       var(--gold-400);
  --brand-hover: var(--gold-500);
  --brand-fg:    var(--granite-900);   /* gold needs dark text */

  --success:     var(--spruce-500);
  --warning:     var(--sandstone-400);
  --danger:      var(--oak-400);
  --info:        var(--alpine-400);

  /* ---------- Typography ---------- */
  --font-display: 'Bricolage Grotesque', 'Söhne Breit', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Geist', 'Söhne', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (1.250 — major third) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  76px;
  --text-7xl:  96px;

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-normal: 1.5;
  --leading-loose: 1.7;

  /* ---------- Spacing (4px grid) ---------- */
  --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;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(28, 26, 22, 0.04);
  --shadow-sm: 0 1px 3px rgba(28, 26, 22, 0.06), 0 1px 2px rgba(28, 26, 22, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(28, 26, 22, 0.10), 0 2px 6px -2px rgba(28, 26, 22, 0.06);
  --shadow-lg: 0 18px 40px -12px rgba(28, 26, 22, 0.18), 0 6px 14px -6px rgba(28, 26, 22, 0.08);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--alpine-300);

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

/* =============================================================
   Semantic element styles
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.meta, small {
  font-size: var(--text-xs);
  color: var(--fg-3);
  line-height: var(--leading-normal);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

code, .mono, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--granite-50);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  color: var(--granite-800);
}

a {
  color: var(--gold-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--gold-700); }

::selection { background: var(--gold-200); color: var(--granite-900); }