/* ═══════════════════════════════════════════════════════════════
   Kithby: Theme Alternates

   Three directions total. The DEFAULT (Ink & Brass) lives in style.css
   under :root, it is not repeated here. This file contains only the two
   alternates, and they override TOKENS ONLY.

   No per-theme headers, footers, or layouts: every theme shares one
   structure. Adding a theme = redefining tokens. If a theme seems to need
   a structural override, the component is wrong, not the theme.
═══════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────────────────
   EDITORIAL RESTRAINT
   Near-black on true white. Almost no color. Type carries everything.
   Display: Newsreader (low stroke contrast, unlike Playfair).
──────────────────────────────────────────────────────────────────────────── */
:root[data-theme="editorial"] {
  --ink:        #0A0A0A;
  --ink-dark:   #000000;
  --ink-mid:    #45454D;
  --ink-light:  #6E6E76;   /* was #A1A1AA — 2.5:1 on white */

  --cream:      #FFFFFF;
  --cream-dark: #F4F4F5;
  --white:      #FFFFFF;
  --ground:     #EDEDEE;   /* cool paper: this theme's surfaces are true white */
  --border:     #E4E4E7;
  --line:       #E4E4E7;

  --teal:       #0A0A0A;
  --teal-dark:  #000000;
  --teal-light: #3F3F46;

  /* One restrained accent, deep ink blue, used sparingly */
  --amber:      #1F3A5F;
  --amber-light:#2E5484;
  /* The primary button put near-black on this navy: 2.56:1, under the 4.5
     floor, on the main call to action of every page. White measures 7.73:1. */
  --action-ink: #FFFFFF;
  /* The gauge's scored stroke on the dark banner. --amber-light is tuned to
     carry TEXT on ink and measures 2.56:1 there as a graphic, under the 3:1
     floor; this is the same navy lightened until it clears 5.27:1. Editorial
     is the only theme whose --amber-light does not already pass. */
  --gauge-fill-dark: #5586C4;

  --red:        #991B1B;
  --green:      #166534;
  --caution:      #8A5A22;
  --caution-wash: #F6F1E9;

  --teal-wash:   #F4F4F5;
  --amber-wash:  #EEF2F7;
  --green-wash:  #F0F5F1;
  --red-wash:    #FBF0F0;
  --plum:        #4C1D95;
  --plum-wash:   #F3F0FA;

  --radius:     4px;
  --radius-sm:  2px;
  --radius-lg:  8px;

  --shadow:     0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.16);

  --font-display: 'Newsreader', Georgia, serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --display-weight: 400;
  --display-spacing: -.02em;
}

:root[data-theme="editorial"] .gate-panel-brand::after {
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 68%);
}
:root[data-theme="editorial"] .btn-primary { color: #fff; }
:root[data-theme="editorial"] .card:hover,
:root[data-theme="editorial"] .post:hover { border-color: #D4D4D8; }
:root[data-theme="editorial"] .form-control:focus {
  box-shadow: 0 0 0 3px rgba(31,58,95,.12);
}


/* ────────────────────────────────────────────────────────────────────────────
   MODERN PRODUCT
   Dark technical canvas, cool grays, one vivid accent. No serif anywhere.
──────────────────────────────────────────────────────────────────────────── */
:root[data-theme="product"] {
  --ink:        #EDEDEF;   /* text (light on dark) */
  --ink-dark:   #FFFFFF;
  --ink-mid:    #A1A1AA;
  --ink-light:  #9A9AA4;   /* was #71717A — 3.6:1 on the dark canvas */

  --cream:      #0F0F11;
  --cream-dark: #1C1C20;   /* subtle fill */
  --white:      #17171A;   /* card surface */
  --ground:     #0B0B0D;   /* page canvas, below the card surface */
  --border:     #27272A;
  --line:       #27272A;

  --teal:       #17171A;   /* header / brand panel */
  --teal-dark:  #0F0F11;
  --teal-light: #2E2E34;

  --amber:      #4F46E5;   /* vivid accent */
  /* White on the old #6D64F0 measured 4.44, a hair under AA. Two clicks
     darker takes it to 4.67 without changing the hue. */
  --action:     #695FF0;
  --action-ink: #FFFFFF;
  /* Status text on the dark wash: --amber is a mid indigo and the wash is
     near-black, so they sit 2.64:1 apart. No wash value fixes that — the text
     has to come up. See --amber-on-wash in style.css. */
  --amber-on-wash: #8B84F4;
  --amber-light:#6D64F0;
  /* Product is dark end to end: the card surface is #17171A, not paper. The
     gauge's default fill (--amber, tuned for paper) measures 2.70:1 there,
     under the 3:1 floor for a graphic, so this theme uses the ink-tuned
     accent on every surface rather than only on the banner. */
  --gauge-fill: var(--amber-light);

  --red:        #F87171;
  --green:      #4ADE80;
  --caution:      #F5B759;
  --caution-wash: #2A2110;

  --teal-wash:   #1C1C20;
  --amber-wash:  #1E1B37;
  --green-wash:  #14251A;
  --red-wash:    #2A1618;
  --plum:        #A78BFA;
  --plum-wash:   #221B33;

  --radius:     8px;
  --radius-sm:  4px;
  --radius-lg:  14px;

  --shadow:     0 1px 2px rgba(0,0,0,.4);
  --shadow-md:  0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.65);

  /* No serif, geometric sans throughout, tightened */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-voice:   'Inter', system-ui, -apple-system, sans-serif; /* all-sans theme: no serif voice */
  --display-weight: 650;
  --display-spacing: -.03em;

  /* --teal is this theme's dark structural surface (header, buttons), so
     anything using it as *text* needs a genuinely light value instead, or
     it reads as dark-on-dark. --ink (near-white here) is that value. */
  --teal-ink: var(--ink);
}

/* Surface corrections the tokens alone can't express on a dark canvas */
:root[data-theme="product"] .gate-panel-brand::after {
  background: radial-gradient(circle, rgba(79,70,229,.20) 0%, transparent 68%);
}
:root[data-theme="product"] .btn-primary {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}
:root[data-theme="product"] .btn-primary:hover {
  background: var(--amber-light);
  border-color: var(--amber-light);
  color: #fff;
}
:root[data-theme="product"] .btn-ghost { color: var(--ink); border-color: var(--line); }
:root[data-theme="product"] .btn-ghost:hover { background: var(--cream-dark); border-color: #3F3F46; color: var(--ink); }
:root[data-theme="product"] .card:hover,
:root[data-theme="product"] .post:hover { border-color: #3F3F46; }
/* .alert-info's border still reads as near-invisible against a dark wash
   with only --teal-light to work with; the accent color reads better and
   matches this theme's other "info-ish" surfaces. */
:root[data-theme="product"] .alert-info { border-color: var(--amber); }
:root[data-theme="product"] .form-control:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(79,70,229,.20);
}
:root[data-theme="product"] a:hover { color: var(--amber-light); }
/* Avatar inset shadows are tuned for light backgrounds, drop them on dark */
:root[data-theme="product"] .avatar-circle,
:root[data-theme="product"] .post-avatar,
:root[data-theme="product"] .mention-item-av,
:root[data-theme="product"] .profile-avatar-lg,
:root[data-theme="product"] .profile-mini .avatar-lg { box-shadow: none; }
/* Inputs on dark surfaces */
:root[data-theme="product"] .form-control,
:root[data-theme="product"] textarea,
:root[data-theme="product"] select.form-control {
  background: var(--cream-dark);
  color: var(--ink);
}
:root[data-theme="product"] .composer textarea { background: var(--cream-dark); color: var(--ink); }


/* ═══════════════════════════════════════════════════════════════
   ACCENT STUDIES

   Four candidate brand accents, added for evaluation. Unlike the two
   themes above, these keep Ink & Kith's structure, spacing and radii
   exactly as they are. Layout is the control; everything that carries
   identity is the variable.

   They started as accent-only, which turned out to be no comparison at
   all: --amber appears on a badge, a link hover and a focus ring, so
   varying it changed nothing you could see. Each study now also moves
   the page ground, the hairlines, the primary action colour and the
   display typeface, because that is what adopting a direction would
   actually mean. Body copy stays Inter throughout, so the reading
   experience is held constant and only the voice changes.

   Each does now carry its own --ground, mixed a few degrees toward its
   own accent. Varying literally nothing but --amber made the studies
   almost invisible: the accent has very little to do on a signed-in
   page, so switching between them changed one badge. A ground tinted
   toward the accent is still the same design, but you can see which
   one you are looking at.

   The token contract these rely on, which already existed:
     --amber        the accent on LIGHT grounds  (.lp-eyebrow-dark, links)
     --amber-light  the accent on DARK grounds   (.lp-eyebrow, logo dot)

   Today both values are tuned for dark, which is why --amber currently
   fails at 2.09:1 on paper. Every value below is checked against the
   ground it actually appears on; the ratio is noted beside it.
═══════════════════════════════════════════════════════════════ */


/* ── BRASS & INK ─────────────────────────────────────────────────────────────
   The accent as nameplate, key, members' plaque. Brass carries the
   invite-only, vouched-for argument in a way a tech green cannot, and it
   moves the brand off the near-black + acid-green default. The existing
   green is not deleted, it is demoted: it stops being the identity and
   survives only as the semantic "live / present" signal.
   Caution moves to burnt orange so the warning step stays separable
   from a brand colour that now occupies gold.
──────────────────────────────────────────────────────────────────────────── */
:root[data-theme="brass"] {
  --amber:        #8A6420;   /* 5.15:1 on #FAFAF9 paper  ✓ */
  --amber-light:  #C9963F;   /* 6.69:1 on #16181D ink    ✓ */
  --amber-wash:   #F6EFE1;

  --caution:      #B4541E;   /* 4.78:1 on paper — clearly not the brand gold */
  --caution-wash: #F9EDE5;

  /* Green keeps one job only: presence. Never a heading, never a link. */
  --green:        #2F7D4F;
  --green-wash:   #EFF6F2;   /* was #E8F3EC: --green on it measured 4.43 */

  /* Ground, rules and the recessed fill all shift, not just the accent:
     parchment: the plaque the nameplate is screwed to */
  --ground:       #EFE6D2;
  --line:         #DFD3B6;
  --border:       #DFD3B6;
  --cream-dark:   #E6DABF;
  --action:       var(--amber);
  --action-ink:   #FFFFFF;
  --action-hover: #6F4F17;


  /* Fraunces: a soft, slightly wonky serif with the character of a painted
     sign or an engraved plaque, which is the whole argument for brass. Set
     lighter than the default sans so the extra character does not shout. */
  --font-display:    'Fraunces', 'Instrument Sans', Georgia, serif;
  --display-weight:  600;
  --display-spacing: -.015em;
}


/* ── IVY & INK ───────────────────────────────────────────────────────────────
   One deep botanical green instead of two. Patient and established rather
   than startup-growth. The conservative option: it fixes the contrast
   failure without asking anyone to accept a new hue.
──────────────────────────────────────────────────────────────────────────── */
:root[data-theme="ivy"] {
  --amber:        #1E4D3A;   /* 9.30:1 on #FAFAF9 paper  ✓ */
  --amber-light:  #6FBF9A;   /* 8.07:1 on #16181D ink    ✓ */
  --amber-wash:   #E9F1EC;

  --green:        #3B6B4A;
  --green-wash:   #EDF2EE;

  /* Ground, rules and the recessed fill all shift, not just the accent:
     a conservatory green, cool against the deep ivy */
  --ground:       #E2EBE4;
  --line:         #CBD9CF;
  --border:       #CBD9CF;
  --cream-dark:   #D6E2D9;
  --action:       var(--amber);
  --action-ink:   #FFFFFF;
  --action-hover: #163A2B;


  /* Source Serif 4: a transitional serif that reads settled and unhurried.
     The point of ivy is patience and establishment, and a serif argues that
     before a single word is read. */
  --font-display:    'Source Serif 4', 'Instrument Sans', Georgia, serif;
  --display-weight:  600;
  --display-spacing: -.012em;
}


/* ── INK ONLY ────────────────────────────────────────────────────────────────
   No chromatic accent at all. Inversion, weight and rule-work carry the
   hierarchy; colour is reserved entirely for semantic states. For a product
   whose thesis is "no advertising, no promotion, no noise", a palette with
   no decorative colour is itself the argument. The logo's live dot becomes
   paper on ink — a light rather than a hue.
──────────────────────────────────────────────────────────────────────────── */
:root[data-theme="inkonly"] {
  --amber:        #16181D;   /* 15.56:1 on paper — the accent IS the ink */
  --amber-light:  #FBFAF7;   /* 16.4:1 on ink   — the accent IS the paper */
  --amber-wash:   #ECECED;

  /* Semantic colour survives, and is now the only colour on the page. */
  --green:        #3B6B4A;
  --caution:      #B8863D;
  --red:          #8C2F2F;

  /* Ground, rules and the recessed fill all shift, not just the accent:
     neutral stone, no hue anywhere: the whole argument of this study */
  --ground:       #E8E8E7;
  --line:         #D4D4D2;
  --border:       #D4D4D2;
  --cream-dark:   #DEDEDC;
  --action:       var(--ink);
  --action-ink:   var(--cream);
  --action-hover: #2A251E;


  /* Archivo: a grotesque with real structure, set heavier and tighter than
     the default. With no chromatic accent anywhere, type and weight are the
     only things left to carry hierarchy, so they have to be worth looking at. */
  --font-display:    'Archivo', 'Instrument Sans', system-ui, sans-serif;
  --display-weight:  700;
  --display-spacing: -.028em;
}


/* ── OXBLOOD & INK ───────────────────────────────────────────────────────────
   Ledger ink, wax seal, club stationery. Almost no product in this category
   uses it, so it differentiates on sight. The known weakness is semantic:
   red means error, so --red is pushed brighter and more saturated to stay
   distinguishable from a muted brand oxblood. Judge that pair carefully.
──────────────────────────────────────────────────────────────────────────── */
:root[data-theme="oxblood"] {
  --amber:        #8C3A2E;   /* 7.33:1 on #FAFAF9 paper  ✓ */
  --amber-light:  #D2705F;   /* 5.27:1 on #16181D ink    ✓ */
  --amber-wash:   #F7EBE9;

  --red:          #B3261E;   /* brighter + more saturated than the brand tone */
  --red-wash:     #FBEAE8;
  --green:        #2F7D4F;
  --green-wash:   #EFF6F2;   /* was #E8F3EC: --green on it measured 4.43 */

  /* Ground, rules and the recessed fill all shift, not just the accent:
     warm clay under the wax seal */
  --ground:       #F1E3DD;
  --line:         #E0CBC3;
  --border:       #E0CBC3;
  --cream-dark:   #E8D6CF;
  --action:       var(--amber);
  --action-ink:   #FFFFFF;
  --action-hover: #6E2C22;


  /* Spectral: a text serif with the feel of club stationery and ledger ink,
     which is where oxblood comes from. Quieter than Fraunces on purpose, so
     the colour stays the loud half of this pairing. */
  --font-display:    'Spectral', 'Instrument Sans', Georgia, serif;
  --display-weight:  600;
  --display-spacing: -.008em;
}