/* ============================================================================
 * Rulemancer — colors_and_type.css
 * Single source of truth for the brand palette and typography, loaded by
 * index.html and gate.html. Brand accent is plum (see the --plum-* ramp and
 * the --accent mapping below); teal stays the secondary accent. Nothing
 * downstream of this file should redefine --accent, --plum-*, or any other
 * brand token -- see design-system/README.md "Palette history" for the
 * 2026-07-27 incident where an inline <style> override in index.html did
 * exactly that and both stylesheets were left describing the wrong brand.
 * ========================================================================= */

/* @import MUST precede every other rule or browsers silently drop it (the
 * design file had it after a @font-face block, which is why the fallback
 * faces never loaded). Body/mono faces come from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* The wordmark is a pre-rendered SVG (assets/rulemancer-wordmark.svg, inlined
 * as a <symbol> in index.html) -- the Citadel of Blackrose font it was drawn
 * from is donationware without redistribution rights, so the TTF doesn't ship
 * (docs/plan-packaging.md Part 3). --font-display now leads with Cormorant. */

:root {
    /* Plum — primary brand axis (2026-07-27: promoted from an inline override
     * in index.html to the real stylesheet value; see design-system/README.md
     * "Palette history" for why. Garnet is retired below the status block. */
    --plum-50:#F4EFF8; --plum-100:#E5DAF0; --plum-200:#CDB7E0; --plum-300:#B191CE;
    --plum-400:#9469B4; --plum-500:#7C4E9E; --plum-600:#653C86; --plum-700:#4F2E6B;
    --plum-800:#382050; --plum-900:#241334;

    /* Parchment — warm neutral axis */
    --parchment-50:#FBF9F9; --parchment-100:#F2EFEF; --parchment-200:#E6DEDF;
    --parchment-300:#D3C7C8; --parchment-400:#A99C9E; --parchment-500:#6E6162;

    /* Ink — text on parchment */
    --ink-900:#241519; --ink-700:#43323A; --ink-500:#6B5B61; --ink-300:#9E9095;

    /* Sigil teal — ritual / accent moments (secondary accent, unchanged by the plum move) */
    --teal-300:#7ECFC2; --teal-500:#309B8C; --teal-700:#1E6459;

    /* Status */
    --status-green:#4CAF7C; --status-yellow:#E0A740; --status-red:#E05050; --status-cyan:#56C8D8;

    /* Garnet — RETIRED primary axis (2026-07-27). The --garnet-* ramp and
     * --border-garnet are deleted outright: neither had any consumer once
     * --accent stopped pointing at garnet (grepped repo-wide before removing
     * them). --fg-on-garnet survives below under a legacy name because two
     * external consumers (frontend/gate.html, main.py's inline gate template)
     * still reference it -- its value was never garnet-derived (see comment
     * on the token itself). Do not reintroduce a --garnet-* ramp or point
     * --accent at one again -- that's the exact bug this comment exists to
     * prevent (see design-system/README.md "Palette history"). */

    /* Semantic — light surface (default) */
    --bg-page:var(--parchment-100); --bg-elevated:var(--parchment-50); --bg-card:#FFFFFF;
    /* --bg-overlay here is still the old garnet-tinted rgba(73,21,28,...)
     * literal, not a --garnet-* var reference, so it isn't a dangling
     * reference -- just a stale-but-harmless tint left as-is because changing
     * it would move rendered pixels (see design-system/README.md
     * "Palette history" for why this one component was consciously left). */
    --bg-overlay:rgba(73,21,28,0.6); --bg-muted:var(--parchment-200);
    --fg-primary:var(--ink-900); --fg-secondary:var(--ink-700); --fg-muted:var(--ink-500);
    --fg-subtle:var(--ink-300);
    /* --fg-on-garnet: legacy name, not a garnet reference -- always-light text
     * for use on top of --accent, whatever hue --accent currently is. */
    --fg-on-garnet:var(--parchment-50);
    --border-default:var(--parchment-300); --border-strong:var(--ink-300);
    --accent:var(--plum-600); --accent-hover:var(--plum-700); --accent-soft:var(--plum-100);
    --accent-link:var(--plum-500); --sigil:var(--teal-500); --sigil-soft:var(--teal-300);

    /* Typography */
    --font-display:'Cormorant Garamond','Cinzel','EB Garamond',Georgia,serif;
    --font-wordmark:'Cormorant Garamond','Cinzel',Georgia,serif;
    --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Courier New',monospace;

    --fs-xs:0.75rem; --fs-sm:0.875rem; --fs-base:1rem; --fs-lg:1.125rem; --fs-xl:1.375rem;
    --fs-2xl:1.75rem; --fs-3xl:2.5rem; --fs-4xl:3.5rem; --fs-5xl:5rem;
    --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
    --lh-tight:1.1; --lh-snug:1.25; --lh-base:1.5; --lh-loose:1.7;
    --ls-tight:-0.02em; --ls-normal:0; --ls-wide:0.04em; --ls-tagline:0.18em;

    /* Shape & motion */
    --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:20px; --radius-pill:999px;
    --shadow-xs:0 1px 2px rgba(73,21,28,0.06); --shadow-sm:0 2px 4px rgba(73,21,28,0.08);
    --shadow-md:0 4px 12px rgba(73,21,28,0.10); --shadow-lg:0 12px 32px rgba(73,21,28,0.14);
    --ease-out:cubic-bezier(0.22,1,0.36,1); --t-fast:120ms var(--ease-out); --t-base:220ms var(--ease-out);
    --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
    --space-6:2rem; --space-8:3rem;
}

/* Dark surface — values match what index.html's now-deleted inline <style>
 * override used to set at runtime (2026-07-27 palette-drift fix); see
 * design-system/README.md "Palette history". */
.surface-dark, [data-surface="dark"] {
    --bg-page:#17131F; --bg-elevated:#241D2E; --bg-card:#201A2A;
    --bg-overlay:rgba(0,0,0,.62); --bg-muted:#2E2640;
    --fg-primary:#F1ECF4; --fg-secondary:#C6BDCD; --fg-muted:#928899; --fg-subtle:#6C6379; --fg-on-garnet:#F2EAEC;
    --border-default:#392F4A; --border-strong:#4E4166;
    --accent:var(--plum-400); --accent-hover:var(--plum-300); --accent-soft:rgba(148,105,180,0.24);
    --accent-link:var(--plum-300);
    color:var(--fg-primary); background:var(--bg-page);
}

body { font-family:var(--font-sans); font-size:var(--fs-base); line-height:var(--lh-base);
    color:var(--fg-primary); background:var(--bg-page);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:var(--accent-link); text-decoration:none; }
a:hover { border-bottom:1px solid currentColor; }