/*
  Spill Sisters — Design Token System
  Extracted and consolidated from styles.css, brand.css, and MASTER.md.

  styles.css currently defines its tokens across at least 6 separate :root
  blocks (lines ~1, ~26, ~2050, ~4365, ~4701, ~5037, ~5390) plus one-off
  --control-* tokens for the admin Control Center. This file is the
  single reconciled source of truth: it keeps every token that is
  actually load-bearing in production, gives a name to values that were
  previously hard-coded inline (border-radius, box-shadow, z-index all
  had 15-30 distinct one-off values doing the same handful of jobs), and
  drops tokens that were defined but never read (--black, --coral,
  --teal, --yellow, --gold, --strong-line from the legacy prototype pass).

  Roll-out is additive: this file does not remove anything from
  styles.css. Point new/refactored components at these tokens; migrate
  old rules opportunistically.
*/

:root {
  /* ---------------------------------------------------------------
     COLOR — brand (light, default)
     Source: styles.css :root (line 1) + MASTER.md "Color Tokens".
     MASTER.md's recommended values and the shipped --ss-app-* values
     had drifted apart (e.g. ink #241416 vs #24171d, red #9f1735 vs
     #9a1f35); this reconciles them to the values actually rendering
     in production today.
  --------------------------------------------------------------- */
  --ss-color-bg: #ffffff;
  --ss-color-surface: #ffffff;
  --ss-color-soft: #f9edf1;        /* blush tint — panels, hovers, never full-page */
  --ss-color-ink: #1d1016;          /* primary text — warm near-black */
  --ss-color-muted: #79666f;        /* secondary text, meta, timestamps */
  --ss-color-border: rgba(29, 16, 22, 0.13);
  --ss-color-border-strong: rgba(29, 16, 22, 0.2);

  /* "Cherry" — the brand pink, matured: a deeper raspberry that clears
     AA for white button text (the old #ff2f8b did not) and reads
     confident next to heavy stories rather than sugary. */
  --ss-color-pink: #cf1b63;         /* primary brand / CTA / active state */
  --ss-color-pink-soft: rgba(207, 27, 99, 0.1);
  --ss-color-red: #9a1f35;          /* safety, admin, serious emphasis only */
  --ss-color-lime: #c8ff3d;         /* rare highlight badge — never body text */
  --ss-color-blue: #2563eb;         /* links, share affordances */
  --ss-color-danger: #dc2626;

  /* Callout surface for the "Sister Verdict" prompt and the composer's
     privacy check. Was a cream/brass set: it read as amber, which clashed
     with the raspberry palette and — worse — meant the privacy check's
     healthy state wore the same colour as its own warning state. Blush +
     deep raspberry keeps it on-brand and leaves amber to mean caution. */
  --ss-color-note: #fdeef4;
  --ss-color-note-ink: #a8285c;
  --ss-color-note-line: #e07ba6;

  --ss-color-paper: #fffaf5;        /* legacy warm paper surface (marketing pages) */

  /* ---------------------------------------------------------------
     COLOR — semantic aliases
     Components should read these, not the raw palette above, so a
     future re-theme is a one-line change per alias instead of a
     find-and-replace across 8000 lines.
  --------------------------------------------------------------- */
  --ss-bg: var(--ss-color-bg);
  --ss-surface: var(--ss-color-surface);
  --ss-ink: var(--ss-color-ink);
  --ss-muted: var(--ss-color-muted);
  --ss-border: var(--ss-color-border);
  --ss-pink: var(--ss-color-pink);
  --ss-red: var(--ss-color-red);

  /* ---------------------------------------------------------------
     TYPE
  --------------------------------------------------------------- */
  --ss-font-brand: "GlamLips", system-ui, sans-serif;   /* wordmark asset fallback ONLY */

  /* App chrome + feed + comments: the platform UI font (San Francisco on
     iOS/macOS, Roboto on Android, Segoe UI on Windows) — what each OS is
     hinted to read on screen. No web-font download, no load flash. */
  --ss-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Noto Color Emoji";

  /* Long-form reading surface (the post body) — a screen-tuned text
     serif so a Case File reads like a column, not a UI. */
  --ss-font-reading: "Source Serif 4", Charter, "Iowan Old Style",
    Georgia, "Times New Roman", serif;

  /* Display serif for headlines only — feed-card titles, the thread
     title, the Verdict prompt. Fraunces has optical sizing, so set
     `font-optical-sizing: auto` wherever it is used. Falls back to the
     reading serif if it hasn't loaded yet. */
  --ss-font-display: "Fraunces", "Source Serif 4", Charter, Georgia,
    "Times New Roman", serif;

  --ss-weight-regular: 400;
  --ss-weight-medium: 500;
  --ss-weight-semibold: 600;

  --ss-text-nav: clamp(13px, 1vw, 15px);       /* app shell / nav */
  --ss-text-meta: clamp(12px, 0.9vw, 13px);    /* feed meta */
  --ss-text-body: 16px;                         /* body / feed text */
  --ss-text-comment: clamp(15px, 1vw, 16px);
  --ss-text-feed-title: clamp(16px, 1.03vw, 18px);
  --ss-text-thread-title: clamp(24px, 1.95vw, 32px);

  --ss-leading-tight: 1.15;   /* titles */
  --ss-leading-body: 1.55;    /* feed / UI prose */

  /* ---------------------------------------------------------------
     SPACING
     4px base unit. Named, not numbered, so a spacing bump doesn't
     require renaming every call site.
  --------------------------------------------------------------- */
  --ss-space-1: 4px;
  --ss-space-2: 8px;
  --ss-space-3: 12px;
  --ss-space-4: 16px;
  --ss-space-5: 20px;
  --ss-space-6: 24px;
  --ss-space-8: 32px;
  --ss-space-10: 40px;
  --ss-space-12: 48px;

  --ss-tap-target-min: 44px;   /* mobile minimum, per MASTER.md accessibility rules */
  --ss-tap-gap-min: 8px;       /* minimum gap between adjacent touch targets */

  /* ---------------------------------------------------------------
     RADIUS
     Observed usage ranged over 10/12/14/16/18/20/22/24/26/28/32px
     for what is functionally 3 sizes plus "pill" and "circle". This
     collapses that sprawl to a 4-step scale.
  --------------------------------------------------------------- */
  --ss-radius-sm: 10px;    /* inputs, small chips, tight controls */
  --ss-radius-md: 14px;    /* buttons, list rows, comment bubbles */
  --ss-radius-lg: 20px;    /* cards, sheets, composer, modals */
  --ss-radius-xl: 28px;    /* large modals / hero surfaces */
  --ss-radius-pill: 999px; /* pill buttons, tags */
  --ss-radius-circle: 50%; /* avatars, icon-only buttons */

  /* ---------------------------------------------------------------
     SHADOW
     Every shadow in styles.css is a bespoke rgba value tuned to
     whatever color happened to be nearby. These 4 tiers cover the
     actual jobs shadows do: resting elevation, pink-glow emphasis
     on brand CTAs, and modal/sheet depth.
  --------------------------------------------------------------- */
  --ss-shadow-xs: 0 8px 22px rgba(15, 11, 18, 0.04);
  --ss-shadow-sm: 0 12px 32px rgba(15, 11, 18, 0.06);
  --ss-shadow-md: 0 18px 44px rgba(43, 18, 53, 0.08);
  --ss-shadow-lg: 0 24px 70px rgba(43, 18, 53, 0.13);
  --ss-shadow-modal: 0 32px 90px rgba(9, 7, 13, 0.3);
  --ss-shadow-pink: 0 14px 34px rgba(207, 27, 99, 0.28);   /* brand CTA emphasis */

  /* ---------------------------------------------------------------
     Z-INDEX
     Observed live values: 1, 2, 3, 20, 30, 40, 80, 360, 9999, 10020 —
     an ungoverned stack with no relation between neighboring numbers
     and what they mean. This defines one ordered scale; every layer
     in the app should map to one of these, not a bespoke number.
  --------------------------------------------------------------- */
  --ss-z-base: 0;
  --ss-z-raised: 10;        /* sticky feed elements, in-content layering */
  --ss-z-dropdown: 30;
  --ss-z-sticky-nav: 40;
  --ss-z-overlay: 80;       /* drawers, right-rail overlays */
  --ss-z-modal: 360;
  --ss-z-toast: 9000;
  --ss-z-boot: 9999;        /* boot screen, splash */
  --ss-z-critical: 10020;   /* system-level banners above everything */

  /* ---------------------------------------------------------------
     REDESIGN LAYER (Pass 1 — feed + thread)
     Consumed by redesign.css. Montserrat 700 is loaded in index.html
     so semibold/bold headings render a real face, not synthetic bold.
  --------------------------------------------------------------- */
  --ss-tracking-caps: 0.06em;      /* uppercase labels need tracking */
  --ss-weight-bold: 700;

  --ss-container-feed: 640px;      /* feed centre column max */
  --ss-container-thread: 680px;    /* single-post reading column max */
  --ss-topbar-h: 54px;             /* flat app top bar height */
  --ss-rail-gap: 32px;             /* gap between rails and centre column */

  --ss-divider: 1px solid var(--ss-color-border);
  --ss-focus-ring: 0 0 0 3px rgba(207, 27, 99, 0.38);   /* brand-pink focus */

  color-scheme: light;
}

/* =====================================================================
   DARK MODE
   Source: styles.css .dark-mode / prefers-color-scheme block (~line 2050).
   Only color tokens repaint; type/space/radius/shadow/z-index are
   shared across themes by design.
===================================================================== */
:root.dark-mode,
:root[data-theme="dark"],
body.dark-mode {
  --ss-color-bg: #140e12;
  --ss-color-surface: #1c151b;
  --ss-color-soft: #271b23;
  --ss-color-ink: #f6e9ef;
  --ss-color-muted: #b6a3ac;
  --ss-color-border: #332430;
  --ss-color-border-strong: #4a3542;

  --ss-color-pink: #f2478f;
  --ss-color-pink-soft: rgba(242, 71, 143, 0.18);
  --ss-color-red: #ff829b;
  --ss-color-lime: #c8ff3d;

  /* Callout surface, dark: deep plum ground with a light pink label. */
  --ss-color-note: #2a1220;
  --ss-color-note-ink: #f2a8c8;
  --ss-color-note-line: #cf1b63;

  --ss-shadow-md: 0 16px 42px rgba(0, 0, 0, 0.28);
  --ss-shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.28);

  /* Re-point the semantic aliases: their declared value `var(--ss-color-*)`
     is resolved on the element where they are DECLARED, so redefining the
     raw palette above is not enough — they must be redeclared here too. */
  --ss-bg: #140e12;
  --ss-surface: #1c151b;
  --ss-ink: #f6e9ef;
  --ss-muted: #b6a3ac;
  --ss-border: #332430;
  --ss-pink: #f2478f;
  --ss-red: #ff829b;
  --ss-divider: 1px solid #332430;

  color-scheme: dark;
}

/* =====================================================================
   ADMIN CONTROL CENTER
   A deliberately distinct cyberpunk theme (magenta/cyan on near-black)
   used only inside the internal admin surface. Kept isolated under its
   own namespace — do not let these leak into product-facing components,
   and do not merge them into --ss-* above.
===================================================================== */
.control-center-root {
  --control-bg: #0b0f19;
  --control-surface: rgba(15, 23, 42, 0.82);
  --control-surface-strong: #111827;
  --control-border: rgba(148, 163, 184, 0.2);
  --control-ink: #f8fafc;
  --control-muted: #94a3b8;
  --control-magenta: #ff00ff;
  --control-green: #00ff9d;
  --control-blue: #3b82f6;
  --control-ice: #7dd3fc;
}