/* ============================================================
   Beyond Work — Second Nature
   Foundational tokens: color, type, spacing, radii, motion.
   ============================================================ */

@import url('/fight-club/assets/fonts/fonts.css');

:root {
  /* ---------- FOREST (primary) ---------- */
  --forest-950: #0A1611;
  --forest-900: #14271D;
  --forest-700: #1F3D2C;   /* primary brand */
  --forest-500: #355C42;
  --forest-300: #6B8C73;
  --forest-100: #C8D4C5;
  --forest-50:  #E8EDE5;

  /* ---------- EARTH (warmth) ---------- */
  --bark-700: #3D2E22;
  --bark-500: #6B5343;
  --bark-300: #A89070;

  /* ---------- PAPER / STONE (neutral) ---------- */
  /* Tuned slightly lighter and cooler than the previous warm cream
     so the brand reads distinct from Anthropic's cream palette. */
  --paper-25:  #FCFAF3;
  --paper-50:  #F7F4EC;   /* default page (was #F2EEE3) */
  --stone-200: #DCD3C0;
  --ash-600:   #4A453E;
  --mist-400:  #8A8275;

  /* ---------- ACCENT · GREEN (primary highlight) ---------- */
  /* A bold forest-green in its alert/active register — same family as
     the brand forest, just brighter. Tuned to read as authority on
     paper and as emphasis (not glow) on dark. Reserved for editorial
     italics, pull-quotes, key data, sigil highlights, link underlines.
     Note: the *variable* name kept as `mint-*` for stability across
     consumers, but the values are forest-greens, not mints. */
  --mint-700: #0F6B43;   /* deep — link & accent on light bgs */
  --mint-500: #1E9961;   /* default brand accent */
  --mint-400: #27B070;   /* italics & pull-quotes on paper */
  --mint-300: #5BD79A;   /* lifted — italics on dark surfaces */
  --mint-100: #B8E8CC;   /* tint chip / focus halo */

  /* ---------- ACCENT · RUST (secondary, legacy) ---------- */
  /* Demoted from headline accent. Now used only as a typology tag
     (e.g. “attention” state, archival labels). */
  --rust-500: #A65A3A;
  --rust-700: #7A3F25;

  /* ---------- SEMANTIC SURFACES ---------- */
  /* Every component should use semantic tokens (not raw forest/paper)
     so the dark-mode override flips everything in lockstep.           */
  --bg-page:        var(--paper-50);
  --bg-elevated:    var(--paper-25);
  --bg-sunk:        var(--paper-25);
  --bg-inverse:     var(--forest-900);
  --bg-inverse-soft: var(--forest-700);

  --fg-strong:      var(--forest-900);
  --fg-default:     var(--ash-600);
  --fg-muted:       var(--mist-400);
  --fg-on-inverse:  var(--paper-25);

  /* the accent “look-here” color, light vs dark */
  --accent:         var(--mint-700);   /* on paper */
  --accent-soft:    var(--mint-100);   /* tint chip */
  --accent-italic:  var(--mint-500);   /* hero italic on light */
  /* italic on a dark photo plate — hero, where bg is dark even in light mode.
     Pulled deeper than mint-300 (which reads candy) and richer than the
     pale #88D2A3 tested earlier. Sits as moss-with-presence. */
  --accent-italic-on-dark: #4FB07A;

  /* ---------- BRAND FILL (always-deep) ----------
     Use these for primary button backgrounds, dark chips, and any
     surface that must stay deep-forest in BOTH light and dark modes.
     `--forest-700` inverts in dark mode (it's also used as a fg color),
     so it's the wrong token for fills. */
  --brand-fill:        #1F3D2C;   /* deep forest */
  --brand-fill-hover:  #355C42;   /* one step lighter */
  --brand-fill-fg:     #FAF6EB;   /* paper text on brand fill */

  --border-hairline-color: var(--stone-200);
  --border-hairline: 1px solid var(--border-hairline-color);
  --border-strong:   1px solid var(--forest-700);

  --shadow-rest:  none;
  --shadow-float: 0 12px 32px -16px rgba(20, 39, 29, 0.18);
  --shadow-deep:  0 32px 80px -24px rgba(10, 22, 17, 0.30);

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif: "Spectral", "GT Alpina", "Tiempos Headline", Georgia, serif;
  --font-sans:  "Inter Tight", "Söhne", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", "Berkeley Mono", "Söhne Mono", ui-monospace, "SF Mono", monospace;

  /* Legacy axis tokens — kept for compatibility; Spectral exposes no
     opsz/SOFT/WONK axes, so the value is now `normal`. */
  --fraunces-display: normal; /* @kind font */
  --fraunces-text:    normal; /* @kind font */

  /* ---------- TYPE SCALE ---------- */
  --type-display-xl: 5.5rem;     /* 88 */
  --type-display-l:  3.75rem;    /* 60 */
  --type-display-m:  2.5rem;     /* 40 */
  --type-headline-l: 1.75rem;    /* 28 */
  --type-headline-m: 1.25rem;    /* 20 */
  --type-body-l:     1.125rem;   /* 18 */
  --type-body-m:     1rem;       /* 16 */
  --type-body-s:     0.875rem;   /* 14 */
  --type-mono-m:     0.875rem;   /* 14 */
  --type-mono-s:     0.75rem;    /* 12 */

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII ---------- */
  --radius-0: 0;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 20px;
  --radius-organic: 60% 40% 55% 45%;

  /* ---------- MOTION ---------- */
  --ease-organic: cubic-bezier(0.32, 0.72, 0.24, 1); /* @kind other */
  --ease-out:     cubic-bezier(0.0, 0.0, 0.18, 1); /* @kind other */
  --ease-in:      cubic-bezier(0.5, 0.0, 1, 1); /* @kind other */
  --dur-1: 160ms; /* @kind other */
  --dur-2: 280ms; /* @kind other */
  --dur-3: 480ms; /* @kind other */
  --dur-4: 1500ms; /* @kind other */
  --dur-5: 2400ms; /* @kind other */
}

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */

html, body {
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--type-body-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--fg-strong);
  font-family: var(--font-serif);
  font-variation-settings: var(--fraunces-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--type-display-l); line-height: 1.05; }
h2 { font-size: var(--type-display-m); line-height: 1.10; }
h3 { font-size: var(--type-headline-l); line-height: 1.20; font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.01em; }
h4 { font-size: var(--type-headline-m); line-height: 1.25; font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; }

p  { font-size: var(--type-body-m); line-height: 1.55; text-wrap: pretty; }
.lead { font-size: var(--type-body-l); line-height: 1.6; color: var(--fg-strong); }
small, .caption { font-size: var(--type-body-s); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-mono-s);
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--forest-700);
}

.mono { font-family: var(--font-mono); font-size: var(--type-mono-m); letter-spacing: 0.02em; }

.serif { font-family: var(--font-serif); font-variation-settings: var(--fraunces-display); }

a {
  color: var(--forest-700);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-organic);
}
a:hover { border-bottom-color: var(--forest-700); }

hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: var(--space-12) 0;
}

::selection { background: var(--forest-100); color: var(--forest-900); }

/* ============================================================
   DARK MODE
   The page becomes a deep forest charcoal; surfaces lift to a
   slightly warmer green-grey; mint becomes the bright accent
   (which is exactly where it earns its keep). The rust accent
   is *not* used in dark mode — it muddies on dark grounds.
   ============================================================ */
[data-theme="dark"] {
  --paper-25:  #1A2622;   /* elevated surface */
  --paper-50:  #0F1714;   /* page background */
  --stone-200: #2A3733;   /* hairline borders, lifted */
  --ash-600:   #C4CFC8;   /* default body text on dark */
  --mist-400:  #7E8B86;   /* muted captions, dateline */

  /* The forest scale flips meaning: the strong accent that read as
     near-black on light becomes near-white on dark.                */
  --forest-900: #E8EDE5;
  --forest-700: #A8C8B2;
  --forest-500: #6B8C73;
  --forest-300: #4A6353;
  --forest-100: #1F3D2C;
  --forest-50:  #14271D;

  --bg-page:        var(--paper-50);
  --bg-elevated:    var(--paper-25);
  --bg-sunk:        #0A1310;
  --bg-inverse:     #E8EDE5;
  --bg-inverse-soft: #A8C8B2;

  --fg-strong:      #F0F4ED;
  --fg-default:     #C4CFC8;
  --fg-muted:       #7E8B86;
  --fg-on-inverse:  #14271D;

  /* on dark, mint must read as luminous green — not neon candy.
     Same value as light-mode on-dark (the photo plate is dark either way). */
  --accent:         #4FB07A;
  --accent-soft:    rgba(79, 176, 122, 0.18);
  --accent-italic:  #4FB07A;
  --accent-italic-on-dark: #4FB07A;

  --border-hairline-color: #2A3733;
  --shadow-rest:  none;
  --shadow-float: 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  --shadow-deep:  0 32px 80px -24px rgba(0, 0, 0, 0.8);
}
[data-theme="dark"] ::selection { background: var(--mint-700); color: #F0F4ED; }

html { color-scheme: light; transition: background-color var(--dur-2) var(--ease-organic); }
html[data-theme="dark"] { color-scheme: dark; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}