/* ============================================================
   GEOFFS RUNS — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Caveat:wght@500;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* ---------- COLOR — raw palette ---------- */
  --dusk:        #F25C29;
  --dusk-deep:   #C8421B;
  --dusk-soft:   #FBD4C2;

  --midnight:        #0F1F3D;
  --midnight-deep:   #07132A;
  --midnight-soft:   #1E3358;

  --dawn:        #FFB836;
  --dawn-soft:   #FFE7B5;

  --chalk:       #F5EDDE;
  --chalk-deep:  #E9DEC6;

  --hivis:       #E8FF4D;
  --brick:       #A83A2B;

  --ink:         #171612;
  --ink-soft:    #4A463E;
  --ink-faint:   #8A857A;

  --white:       #FFFFFF;
  --paper:       #FBF7EE;

  /* ---------- COLOR — semantic ---------- */
  --bg:          var(--chalk);
  --bg-alt:      var(--paper);
  --bg-dark:     var(--midnight);
  --bg-pop:      var(--dusk);

  --fg1:         var(--ink);
  --fg2:         var(--ink-soft);
  --fg3:         var(--ink-faint);
  --fg-on-dark:  var(--chalk);
  --fg-on-pop:   var(--ink);

  --border:      var(--ink);
  --border-soft: rgba(23, 22, 18, 0.15);

  --accent:      var(--dusk);
  --accent-hover:var(--dawn);
  --accent-press:var(--dusk-deep);

  --focus:       var(--hivis);

  --success:     #2F8F4A;
  --warning:     var(--dawn);
  --danger:      var(--brick);

  /* ---------- SIGNATURE GRADIENT ---------- */
  --grad-dusk-dawn: linear-gradient(
    180deg,
    var(--midnight)  0%,
    var(--midnight)  15%,
    var(--brick)     45%,
    var(--dusk)      70%,
    var(--dawn)     100%
  );
  --grad-horizon: linear-gradient(
    90deg,
    var(--midnight) 0%, var(--brick) 50%, var(--dusk) 100%
  );

  /* ---------- TYPE — families ---------- */
  --font-display: 'Anton', 'Oswald', 'Impact', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand:    'Caveat', 'Bradley Hand', cursive;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE — scale ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   42px;
  --fs-4xl:   56px;
  --fs-5xl:   72px;
  --fs-6xl:   96px;
  --fs-7xl:   128px;

  /* ---------- TYPE — line heights ---------- */
  --lh-tight: 0.95;
  --lh-snug:  1.1;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* ---------- TYPE — letter spacing ---------- */
  --ls-display: -0.01em;
  --ls-eyebrow: 0.18em;
  --ls-button:  0.08em;
  --ls-body:    0em;

  /* ---------- SPACING (8px base) ---------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ---------- RADII ---------- */
  --radius-sharp: 0px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-pill:  999px;

  /* ---------- BORDERS ---------- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --bw-4: 4px;

  /* ---------- SHADOWS — flat offset block ---------- */
  --shadow-stamp-sm: 2px 2px 0 var(--ink);
  --shadow-stamp:    4px 4px 0 var(--ink);
  --shadow-stamp-lg: 6px 6px 0 var(--ink);

  --shadow-stamp-dusk:    4px 4px 0 var(--dusk);
  --shadow-stamp-dusk-lg: 6px 6px 0 var(--dusk);
  --shadow-stamp-dawn:    4px 4px 0 var(--dawn);
  --shadow-stamp-mid:     6px 6px 0 var(--midnight);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  400ms;

  /* ---------- LAYOUT ---------- */
  --container: 1280px;
  --gutter:    24px;
}

/* ============================================================
   Element defaults
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 700;
  margin: 0;
}
h5, .eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin: 0;
}
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  font-weight: 400;
  margin: 0;
  text-wrap: pretty;
}

.h-sentence {
  text-transform: none;
  letter-spacing: 0;
}

.hand {
  font-family: var(--font-hand);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-weight: 500;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--dusk);
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-io);
}
a:hover { text-decoration-thickness: 4px; }

:focus-visible {
  outline: var(--bw-3) solid var(--focus);
  outline-offset: 2px;
}

::selection { background: var(--dusk); color: var(--ink); }