/* ============================================================
   Tramuntana Design Tokens — "Deep Water"
   Dark, cinematic, brushed-metal. Brass is the single accent.
   Variable NAMES are preserved from the previous (limestone)
   system so the component layer keeps resolving — but every
   value is remapped to the Deep Water direction.
   ============================================================ */

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

:root {
  /* ----------------------------------------------------------
     DEEP WATER — base palette (near-black blues, never pure #000)
     ---------------------------------------------------------- */
  --ink-950: #0c1119;   /* was #070b12 — deepest surface: footer, bg-2, scrolled header */
  --ink-900: #121b27;   /* was #0c1119 — main body, a touch lighter */
  --ink-850: #182230;   /* was #10161f */
  --ink-800: #1f2b3b;   /* was #161d28 */
  --ink-line:   rgba(180, 196, 220, 0.13);
  --ink-line-2: rgba(180, 196, 220, 0.22);

  --fg:   #eef2f7;
  --fg-2: #aab4c2;
  --fg-3: #7b8694;

  --brass:      #c9a35b;
  --brass-2:    #e3c585;
  --brass-deep: #a07f3d;
  --steel:      #7d93ad;

  /* Scrim recipes (reused across full-bleed media bands) */
  --scrim-v:    linear-gradient(180deg, rgba(7,11,18,.72), rgba(7,11,18,.35) 38%, rgba(7,11,18,.82));
  --scrim-left: linear-gradient(90deg, rgba(7,11,18,.90), rgba(7,11,18,.08) 62%);

  /* ----------------------------------------------------------
     LEGACY TOKEN REMAP — keeps the component layer working.
     "limestone" tokens now read as LIGHT text tones (they were
     mostly used as light-on-dark text); "ink" tokens now read as
     LIGHT text tones too (they were the dark text of the old
     light theme). ink-950 stays genuinely dark — it was only ever
     a background. "pine" → brass. "olive" → steel.
     ---------------------------------------------------------- */
  --color-limestone-50:  #f3f6fa;
  --color-limestone-100: #eef2f7;
  --color-limestone-200: #dde3ea;
  --color-limestone-300: #c5cedb;

  --color-ink-50:  #10161f;
  --color-ink-200: #3a4456;
  --color-ink-400: #7b8694;
  --color-ink-600: #8c97a6;
  --color-ink-700: #aab4c2;   /* body text */
  --color-ink-800: #cdd6e0;
  --color-ink-900: #eef2f7;   /* primary text */
  --color-ink-950: #0c1119;   /* was #070b12 — genuine dark, background only (lifted) */

  --color-pine-300: #e3c585;  /* brass-2 — light accent / em on dark */
  --color-pine-500: #c9a35b;
  --color-pine-700: #c9a35b;  /* brass — THE accent */
  --color-pine-900: #e3c585;  /* brass-2 — hover lightens */

  --color-olive-200: #3a4456;
  --color-olive-400: #9aabc0;
  --color-olive-600: #7d93ad; /* steel — meta labels */

  /* Semantic aliases */
  --color-background: var(--ink-900);
  --color-foreground: var(--fg);
  --color-fg-1: var(--fg);
  --color-fg-2: var(--fg-2);
  --color-fg-3: var(--fg-3);
  --color-fg-meta: var(--steel);
  --color-bg-1: var(--ink-900);
  --color-bg-2: var(--ink-950);
  --color-bg-dark: var(--ink-950);
  --color-accent: var(--brass);
  --color-accent-hover: var(--brass-2);
  --color-rule: var(--ink-line);
  --color-rule-strong: var(--ink-line-2);
  --color-selection-bg: var(--brass);
  --color-selection-fg: var(--ink-950);

  /* TYPE families */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* TYPE scale */
  --fs-meta:   0.75rem;
  --fs-xs:     0.8125rem;
  --fs-sm:     0.875rem;
  --fs-base:   1rem;
  --fs-lg:     1.125rem;
  --fs-xl:     1.25rem;
  --fs-2xl:    1.5rem;
  --fs-3xl:    1.875rem;
  --fs-4xl:    2.25rem;
  --fs-5xl:    3rem;
  --fs-6xl:    3.75rem;
  --fs-7xl:    4.5rem;
  --fs-8xl:    5rem;

  /* TYPE tracking / leading */
  --tracking-tight: -0.02em;
  --tracking-meta:  0.22em;
  --lh-tight:  1.0;
  --lh-snug:   1.06;
  --lh-normal: 1.4;
  --lh-body:   1.6;
  --lh-loose:  1.75;

  /* SPACE / LAYOUT */
  --container-prose: 65ch;
  --container-content: 78rem;
  --gutter-mobile: 1.5rem;
  --gutter-md:    2rem;
  --gutter-lg:    3rem;

  /* RADII / SHADOWS — hard-edged system, 2px max */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   2px;
  --radius-pill: 2px;

  /* MOTION */
  --ease-out-quint:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;
  --dur-rise: 900ms;
}

/* ============================================================
   ELEMENT BASE STYLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background-color: var(--color-bg-1);
  color: var(--color-fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-fg);
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  color: var(--color-fg-1);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  font-variation-settings: normal;
  margin: 0;
}

h1 {
  font-size: 2.75rem;
  line-height: var(--lh-tight);
  font-weight: 900;
}
@media (min-width: 640px)  { h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { h1 { font-size: 5rem;    } }

h2 {
  font-size: 1.875rem;
  line-height: var(--lh-snug);
  font-weight: 800;
}
@media (min-width: 640px)  { h2 { font-size: 2.25rem; } }
@media (min-width: 1024px) { h2 { font-size: 3rem;    } }

h3 {
  font-size: 1.5rem;
  line-height: var(--lh-snug);
  font-weight: 700;
}
@media (min-width: 640px) { h3 { font-size: 1.875rem; } }

h4 {
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  font-weight: 600;
}

h1 em, h2 em, .display-em {
  font-style: normal;
  color: var(--brass-2);
  font-variation-settings: normal;
}

p {
  text-wrap: pretty;
  color: var(--color-fg-2);
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

code, pre, .font-mono {
  font-family: var(--font-mono);
  font-feature-settings: normal;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}