/* ============================================================================
   Songclimber Design Tokens
   Warm off-white + forest green + growth green + gold.
   Voice is Bandcamp meets Spotify editorial meets a well-made indie press kit.
   ============================================================================ */

/* Fonts -- Satoshi (functional, primary) + Playfair Display (editorial).
   Both self-hosted from /fonts. Playfair Display uses its variable wght axis
   for upright + italic, so a single @font-face rule per style covers 100–900. */

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-LightItalic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-MediumItalic.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-BlackItalic.otf') format('opentype');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* Playfair Display — variable font (wght axis, 100–900) for upright + italic.
   One rule per style covers every weight we ship (400/500/600/700 in scale). */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ── Color: surfaces ─────────────────────────────────────────────────── */
  --bg:               #F5F0E8;   /* warm off-white page */
  --surface:          #FBF8F2;   /* card / panel — slightly lighter */
  --surface-sunk:     #EDE6D7;   /* input bg, secondary panel */
  --surface-warm:     #F0E7D2;   /* gold-leaning highlight surface */

  /* ── Color: text ─────────────────────────────────────────────────────── */
  --fg:               #1A1A1A;   /* near-black, body & headline */
  --fg-muted:         #6B6560;   /* secondary text — warm neutral, matches surface family */
  --fg-faint:         #9A9385;   /* tertiary, placeholder */
  --fg-on-brand:      #F5F0E8;   /* cream text on brand-deep */
  --fg-on-brand-muted:#A8B7A0;   /* faded cream on brand-deep */

  /* ── Color: brand ────────────────────────────────────────────────────── */
  --brand:            #2D5016;   /* deep forest green — logo, headers */
  --brand-hi:         #3A6620;
  --brand-deep:       #1F360F;   /* very dark forest — operator nav */
  --brand-shadow:     #14250A;

  /* ── Color: accent / growth ──────────────────────────────────────────── */
  --accent:           #5A9E2F;   /* bright growth green — CTA, link, rule */
  --accent-hi:        #6FB83A;   /* hover */
  --accent-lo:        #4A8525;   /* press */
  --accent-soft:      rgba(90, 158, 47, 0.12);  /* tinted bg for chips */

  /* ── Color: highlight ────────────────────────────────────────────────── */
  --gold:             #C8A96E;   /* warm gold — pull-quote, badge */
  --gold-deep:        #A88846;
  --gold-soft:        rgba(200, 169, 110, 0.16);

  /* ── Color: lines ────────────────────────────────────────────────────── */
  --line:             #E4DCC8;   /* default hairline */
  --line-strong:      #C9BFA8;   /* input border, real divider */
  --line-accent:      rgba(90, 158, 47, 0.45);  /* growth-green hairline */

  /* ── Color: semantic ─────────────────────────────────────────────────── */
  --success:          #5A9E2F;
  --success-soft:     rgba(90, 158, 47, 0.14);
  --warning:          #C8A96E;
  --warning-soft:     rgba(200, 169, 110, 0.18);
  --danger:           #A23B2A;   /* earthy red, never crimson */
  --danger-soft:      rgba(162, 59, 42, 0.12);
  --info:             #2D5016;   /* info uses brand, not blue */
  --info-soft:        rgba(45, 80, 22, 0.10);

  /* ── Type: families ──────────────────────────────────────────────────── */
  --font-sans:        'Satoshi', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:       'Playfair Display', 'Lora', Georgia, serif;
  /* Satoshi available weights: 300, 400, 500, 700, 900 (+ italics).
     The system uses 400/500/700 in the standard scale; 900 reserved for hero moments. */

  /* ── Type: scale (size / line-height) ────────────────────────────────── */
  --t-display-1:      56px;  --lh-display-1: 60px;
  --t-display-2:      40px;  --lh-display-2: 44px;
  --t-h1:             28px;  --lh-h1:        32px;
  --t-h2:             20px;  --lh-h2:        26px;
  --t-h3:             16px;  --lh-h3:        22px;
  --t-body-l:         16px;  --lh-body-l:    24px;
  --t-body:           14px;  --lh-body:      20px;
  --t-body-s:         13px;  --lh-body-s:    18px;
  --t-caption:        12px;  --lh-caption:   16px;
  --t-kicker:         11px;  --lh-kicker:    14px;
  --t-pull:           24px;  --lh-pull:      32px;

  /* ── Type: weights ───────────────────────────────────────────────────── */
  /* NOTE: Satoshi does not ship a 600 weight. --w-semi maps to 700 (Bold)
     so that "semi-bold" styles still render with the correct character. If
     you need finer hierarchy, pair 500 (Medium) with 700 (Bold). */
  --w-regular:        400;
  --w-medium:         500;
  --w-semi:           700;
  --w-bold:           700;
  --w-black:          900;

  /* ── Spacing (4px base) ──────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 80px;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-full:  999px;

  /* ── Shadows (warm, green-brown tinted) ──────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(45, 80, 22, 0.06);
  --shadow-md: 0 4px 12px rgba(45, 80, 22, 0.08), 0 1px 3px rgba(26, 26, 26, 0.04);
  --shadow-lg: 0 16px 32px rgba(45, 80, 22, 0.10), 0 4px 8px rgba(26, 26, 26, 0.05);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4);

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 300ms;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --nav-w:        224px;
  --content-max:  1280px;
  --reading-max:  640px;
}

/* ============================================================================
   Base reset + semantic element styles
   ============================================================================ */

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

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* ── Headings ─────────────────────────────────────────────────────────── */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--t-h1); line-height: var(--lh-h1);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2); line-height: var(--lh-h2);
  font-weight: var(--w-semi);
  letter-spacing: -0.005em;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3); line-height: var(--lh-h3);
  font-weight: var(--w-semi);
  margin: 0;
}

/* ── Display (editorial / hero) ───────────────────────────────────────── */
.display-1 {
  font-family: var(--font-serif);
  font-size: var(--t-display-1); line-height: var(--lh-display-1);
  font-weight: var(--w-semi);
  letter-spacing: -0.02em;
  color: var(--brand);
}
.display-2 {
  font-family: var(--font-serif);
  font-size: var(--t-display-2); line-height: var(--lh-display-2);
  font-weight: var(--w-semi);
  letter-spacing: -0.015em;
  color: var(--brand);
}

/* ── Pull quote (Playfair italic) ─────────────────────────────────────── */
.pull-quote {
  font-family: var(--font-serif);
  font-size: var(--t-pull); line-height: var(--lh-pull);
  font-style: italic;
  font-weight: var(--w-regular);
  color: var(--brand);
}

/* ── Body ─────────────────────────────────────────────────────────────── */
p, .body {
  font-size: var(--t-body); line-height: var(--lh-body);
  margin: 0;
}
.body-l { font-size: var(--t-body-l); line-height: var(--lh-body-l); }
.body-s { font-size: var(--t-body-s); line-height: var(--lh-body-s); color: var(--fg-muted); }
.caption { font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: var(--w-medium); color: var(--fg-muted); }

/* ── Kicker (UPPERCASE label above stats) ─────────────────────────────── */
.kicker {
  font-size: var(--t-kicker); line-height: var(--lh-kicker);
  font-weight: var(--w-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ── Links ────────────────────────────────────────────────────────────── */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── Text utilities ───────────────────────────────────────────────────── */
.fg-muted { color: var(--fg-muted); }
.fg-faint { color: var(--fg-faint); }
.fg-brand { color: var(--brand); }
.fg-accent { color: var(--accent); }
.fg-gold { color: var(--gold-deep); }
.fg-danger { color: var(--danger); }

.font-serif { font-family: var(--font-serif); }
.italic { font-style: italic; }

/* ── Code / mono — DISCOURAGED, only for system paths if absolutely needed ─ */
code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
  padding: 1px 5px;
}

/* ============================================================================
   Component primitives (used by both UI kits and preview cards)
   ============================================================================ */

/* ── Button ───────────────────────────────────────────────────────────── */
.sc-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: inherit;
  font-size: var(--t-body); line-height: 1;
  font-weight: var(--w-semi);
  padding: 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
  white-space: nowrap;
}
.sc-btn:active { transform: scale(0.96); }
.sc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sc-btn--primary {
  background: var(--accent);
  color: #fff;
}
.sc-btn--primary:hover { background: var(--accent-hi); }
.sc-btn--primary:active { background: var(--accent-lo); }

.sc-btn--brand {
  background: var(--brand);
  color: var(--fg-on-brand);
}
.sc-btn--brand:hover { background: var(--brand-hi); }

.sc-btn--ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.sc-btn--ghost:hover { background: var(--surface); border-color: var(--brand); }

.sc-btn--quiet {
  background: transparent;
  color: var(--fg-muted);
  padding: 6px 10px;
}
.sc-btn--quiet:hover { color: var(--fg); background: var(--surface-sunk); }

.sc-btn--sm { padding: 6px 12px; font-size: var(--t-body-s); }
.sc-btn--lg { padding: 14px 22px; font-size: var(--t-body-l); }

/* ── Input ────────────────────────────────────────────────────────────── */
.sc-input, .sc-textarea, .sc-select {
  font-family: inherit;
  font-size: var(--t-body);
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}
.sc-input:focus, .sc-textarea:focus, .sc-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(90, 158, 47, 0.18);
}
.sc-input::placeholder { color: var(--fg-faint); }

/* ── Card ─────────────────────────────────────────────────────────────── */
.sc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.sc-card--editorial {
  background: var(--surface-warm);
  border: 1px solid var(--gold);
  border-radius: var(--r-xl);
}

/* ── Badge / pill ─────────────────────────────────────────────────────── */
.sc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-lo);
  letter-spacing: 0.02em;
}
.sc-badge--gold { background: var(--gold-soft); color: var(--gold-deep); }
.sc-badge--danger { background: var(--danger-soft); color: var(--danger); }
.sc-badge--neutral { background: var(--surface-sunk); color: var(--fg-muted); }
.sc-badge--brand { background: rgba(45, 80, 22, 0.10); color: var(--brand); }
/* Solid variant for "live / in-flight" status (Active release, Now syncing, etc.).
   Reads with more weight than the soft-tint family so it doesn't get lost
   next to passive states like Approved. */
.sc-badge--brand-solid { background: var(--brand); color: var(--fg-on-brand); }

/* ── Hairline rule ────────────────────────────────────────────────────── */
.sc-rule { border: none; border-top: 1px solid var(--line); margin: 0; }
.sc-rule--accent { border-top: 1px solid var(--line-accent); }