/* =========================================================================
   Heiftenua Musi — Design Tokens
   Every value here is a semantic token. Use the vars, not the raw hexes.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     COLOR — primary & brand
     ----------------------------------------------------------------------- */
  --c-near-black:        #0f1724;  /* deep navy-black, primary text (matches logo ink) */
  --c-terracotta:        #b81e2f;  /* brand accent — crimson red from logo */
  --c-terracotta-hover:  #9c1727;  /* darker crimson on hover */
  --c-coral:             #d14453;  /* lighter brand variant for dark bgs */

  /* COLOR — surfaces */
  --c-parchment:         #f5f4ed;  /* page background */
  --c-ivory:             #faf9f5;  /* card / elevated surface */
  --c-white:             #ffffff;  /* reserved — maximum-contrast buttons */
  --c-warm-sand:         #e8e6dc;  /* secondary button, warm light surface */
  --c-dark-surface:      #1f2736;  /* dark card / nav border — navy-tinted */
  --c-deep-dark:         #0f1724;  /* dark-theme page background */

  /* COLOR — neutrals / text */
  --c-charcoal-warm:     #4d4c48;  /* dark text on warm light surfaces */
  --c-olive-gray:        #5e5d59;  /* secondary body text */
  --c-stone-gray:        #87867f;  /* tertiary / metadata */
  --c-dark-warm:         #3d3d3a;  /* dark link, emphasized secondary */
  --c-warm-silver:       #b0aea5;  /* text on dark surfaces */

  /* COLOR — borders & rings */
  --c-border-cream:      #f0eee6;  /* default light border */
  --c-border-warm:       #e8e6dc;  /* emphasized border */
  --c-border-dark:       #1f2736;  /* border on dark surfaces */
  --c-ring-warm:         #d1cfc5;  /* button hover ring */
  --c-ring-subtle:       #dedcd1;  /* lighter interactive surfaces */
  --c-ring-deep:         #c2c0b6;  /* pressed / active */

  /* COLOR — semantic */
  --c-brand:             #b81e2f;  /* Alpine Crimson — matches the logo mountains */
  --c-brand-hover:       #9c1727;
  --c-brand-light:       #d14453;
  --c-error:             #b81e2f;  /* matches brand crimson */
  --c-focus:             #3898ec;  /* the ONLY cool color in the system */

  /* SEMANTIC aliases (use these in components) */
  --bg-page:             var(--c-parchment);
  --bg-surface:          var(--c-ivory);
  --bg-surface-strong:   var(--c-white);
  --bg-surface-alt:      var(--c-warm-sand);
  --bg-dark:             var(--c-near-black);
  --bg-dark-surface:     var(--c-dark-surface);

  --fg-primary:          var(--c-near-black);
  --fg-secondary:        var(--c-olive-gray);
  --fg-tertiary:         var(--c-stone-gray);
  --fg-emphasis:         var(--c-dark-warm);
  --fg-on-dark:          var(--c-warm-silver);
  --fg-on-dark-strong:   var(--c-ivory);
  --fg-brand:            var(--c-terracotta);
  --fg-brand-light:      var(--c-coral);

  --border-default:      var(--c-border-cream);
  --border-strong:       var(--c-border-warm);
  --border-dark:         var(--c-border-dark);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY
     Substitutions (via Google Fonts):
       Anthropic Serif -> EB Garamond
       Anthropic Sans  -> Inter Tight
       Anthropic Mono  -> JetBrains Mono
     ----------------------------------------------------------------------- */
  --font-serif:  "EB Garamond", "Anthropic Serif", Georgia, "Times New Roman", serif;
  --font-sans:   "Inter Tight", "Anthropic Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "JetBrains Mono", "Anthropic Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — px, with rem aliases where useful */
  --fs-display:     64px;
  --fs-section:     52px;
  --fs-sub-lg:      36px;
  --fs-sub:         32px;
  --fs-sub-sm:      25px;
  --fs-feature:     20.8px;
  --fs-body-lg:     20px;
  --fs-body:        17px;
  --fs-body-std:    16px;
  --fs-body-sm:     15px;
  --fs-caption:     14px;
  --fs-label:       12px;
  --fs-overline:    10px;
  --fs-micro:       9.6px;

  /* Line heights */
  --lh-tight:       1.10;
  --lh-heading:     1.20;
  --lh-snug:        1.30;
  --lh-normal:      1.43;
  --lh-relaxed:     1.60;

  /* Weights */
  --fw-regular:     400;
  --fw-medium:      500;

  /* Letter-spacing */
  --ls-normal:      0;
  --ls-label:       0.12px;
  --ls-overline:    0.5px;
  --ls-micro:       0.096px;
  --ls-code:        -0.32px;

  /* -----------------------------------------------------------------------
     SPACING — base 8px
     ----------------------------------------------------------------------- */
  --sp-3:   3px;
  --sp-4:   4px;
  --sp-6:   6px;
  --sp-8:   8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-30: 30px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-96: 96px;
  --sp-120: 120px;

  /* -----------------------------------------------------------------------
     RADII
     ----------------------------------------------------------------------- */
  --r-sharp:     4px;
  --r-sm:        6px;
  --r-md:        8px;
  --r-lg:        12px;
  --r-xl:        16px;
  --r-2xl:       24px;
  --r-3xl:       32px;
  --r-pill:      999px;

  /* -----------------------------------------------------------------------
     SHADOWS / ELEVATION — ring-first
     ----------------------------------------------------------------------- */
  --sh-ring-warm:    0 0 0 1px var(--c-ring-warm);
  --sh-ring-deep:    0 0 0 1px var(--c-ring-deep);
  --sh-ring-subtle:  0 0 0 1px var(--c-ring-subtle);
  --sh-ring-dark:    0 0 0 1px var(--c-dark-surface);
  --sh-ring-brand:   0 0 0 1px var(--c-terracotta);
  --sh-whisper:      0 4px 24px rgba(0, 0, 0, 0.05);
  --sh-inset-press:  inset 0 0 0 1px rgba(0, 0, 0, 0.15);

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --container-max:  1200px;
  --nav-h:          72px;

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ease:           cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:       160ms;
  --dur-base:       240ms;
  --dur-slow:       400ms;
}

/* =========================================================================
   BASE ELEMENT STYLES — opt-in via .prose / applied to body by default
   ========================================================================= */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body-std);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  color: var(--fg-primary);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-section);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sub-lg);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sub);
  line-height: var(--lh-tight);
  color: var(--fg-primary);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sub-sm);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
  margin: 0;
}

h6, .h6 {
  font-family: var(--font-serif);
  font-weight: var(--fw-medium);
  font-size: var(--fs-feature);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body-std);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  margin: 0;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}

.body-sm { font-size: var(--fs-body-sm); }

.body-serif {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-tertiary);
}

.label {
  font-size: var(--fs-label);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-label);
  color: var(--fg-secondary);
}

.overline {
  font-size: var(--fs-overline);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

code, .code {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-code);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-strong);
  margin: var(--sp-48) 0;
}

::selection {
  background: var(--c-terracotta);
  color: var(--c-ivory);
}