/* ═══════════════════════════════════════════════════════════════════════════
   THE DEEPER LAW — shared design tokens and site-wide primitives
   One sheet, three consumers: landing.html, book-template-cosmic.html (the
   reader; its :root and html:not(.dark) blocks mirror these values because
   tests/harness parses them from the template), and build_companion.py.
   Loaded first on every surface; each surface layers its own rules after it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Night palette (default). */
    --bg-deep: #07080c;
    --bg-primary: #0a0b10;
    --bg-elevated: #0f1117;
    --bg-surface: #141620;

    --text-heading: #f8f4ec;
    --text-primary: #f0ece4;
    --text-secondary: #c4b89e;
    --text-muted: #a0947e;

    --accent-gold: #c9a666;          /* small text, rules, icons: 8.7:1 on --bg-deep */
    --accent-gold-bright: #e4c77b;   /* hover and focus */
    --accent-gold-text: #b8965a;     /* quieter gold for labels on elevated surfaces */
    --accent-gold-dim: #8a7340;      /* borders, rules and dividers only, never text */
    --accent-blue: #4a6fa5;
    --accent-blue-bright: #6b94d1;

    --border-subtle: rgba(201, 166, 102, 0.08);
    --border-medium: rgba(201, 166, 102, 0.15);
    --border-strong: rgba(201, 166, 102, 0.30);

    --shadow-cover: 0 30px 60px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.55);
    --vignette: radial-gradient(ellipse at top, rgba(201, 166, 102, 0.06), transparent 60%);

    /* Type. Cinzel for display and labels, Cormorant for everything read. */
    --display-font: 'Cinzel', Trajan, 'Times New Roman', Times, serif;
    --reading-font: 'Cormorant Garamond', Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --mono-font: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --fs-body: 1.25rem;              /* 20px on a 16px root; the reader keeps its own root size control */
    --lh-body: 1.6;
    --measure: 68ch;
    --fs-h1: clamp(2rem, 4vw, 2.75rem);
    --fs-h2: 1.5rem;
    --fs-h3: 1.15rem;
    --fs-label: 0.72rem;
    --fs-eyebrow: 0.7rem;

    /* Three tracking stops only. Lowercase Cormorant is never letter-spaced. */
    --track-display: 0.08em;         /* Cinzel at 1.5rem and above */
    --track-label: 0.15em;           /* uppercase labels 0.7 to 0.9rem */
    --track-eyebrow: 0.3em;          /* eyebrows at 0.7rem and below */

    /* Softened geometry: rounded enough to read as considered, restrained
       enough not to fight Cinzel's cut corners. */
    --radius: 6px;                   /* controls, cards, frames */
    --radius-overlay: 12px;          /* modals, popovers, the search panel only */

    --content-max: 720px;
    --site-max: 1000px;
    --gutter: 1.5rem;
    --toc-width: 340px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.25s;

    color-scheme: dark;
}

/* Day palette: warm paper, not white. The reader selects light mode as
   html:not(.dark); the companion and landing as html.light. Both forms are
   set by the shared head script so exactly one of .dark/.light is present. */
html.light,
html:not(.dark) {
    --bg-deep: #f7f3ea;
    --bg-primary: #f9f6ee;
    --bg-elevated: #efe9dc;
    --bg-surface: #f2ede2;

    --text-heading: #1a1612;
    --text-primary: #241f19;
    --text-secondary: #4a4238;
    --text-muted: #6e6558;

    --accent-gold: #7a5c1e;          /* 5.6:1 on paper */
    --accent-gold-bright: #6a4f16;
    --accent-gold-text: #6f5319;
    --accent-gold-dim: #a8862e;      /* rules only */
    --accent-blue: #2f568c;
    --accent-blue-bright: #24457a;

    --border-subtle: rgba(26, 22, 18, 0.08);
    --border-medium: rgba(26, 22, 18, 0.15);
    --border-strong: rgba(26, 22, 18, 0.30);

    --shadow-cover: 0 30px 60px rgba(40, 30, 10, 0.25), 0 2px 6px rgba(40, 30, 10, 0.2);
    --shadow-overlay: 0 24px 64px rgba(40, 30, 10, 0.25);
    --vignette: none;

    color-scheme: light;
}

/* The landing page is a dark poster and has no day mode; it opts out. */
html.landing-dark-only { color-scheme: dark; }

/* ─────────────────────────────────────────────────────────────────────────
   Site-wide primitives
   ───────────────────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--accent-gold-bright);
    outline-offset: 4px;
    border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

/* The hidden attribute must win over any display set by a component class. */
[hidden] { display: none !important; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* Display labels: the three tracking stops. */
.eyebrow {
    font-family: var(--display-font);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--accent-gold-text);
}
.label {
    font-family: var(--display-font);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* The short centred gold rule that opens a section on every surface. */
.rule-ornament {
    width: 60px;
    height: 1px;
    margin: 1.5rem auto;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

/* Buttons: one filled gold control per page, everything else a ghost. */
.btn-primary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 44px;
    padding: 0.8rem 2rem;
    font-family: var(--display-font);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-primary {
    background: var(--accent-gold);
    color: #07080c;
    border: 1px solid var(--accent-gold);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--accent-gold-bright);
    border-color: var(--accent-gold-bright);
}
html.light .btn-primary,
html:not(.dark) .btn-primary { color: #f7f3ea; box-shadow: none; }
.btn-ghost {
    background: transparent;
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold-dim);
    font-size: 0.7rem;
    padding: 0.65rem 1.25rem;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
    color: var(--accent-gold-bright);
    border-color: var(--accent-gold);
    background: rgba(201, 166, 102, 0.06);
}
.btn-ghost[aria-pressed="true"] {
    background: rgba(201, 166, 102, 0.10);
    box-shadow: inset 0 0 0 1px var(--accent-gold);
}
.btn-ghost svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* Site navigation row: emblem + wordmark, then Read and Companion. */
.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--site-max);
    margin: 0 auto;
    padding: 1rem var(--gutter);
}
.site-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--display-font);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}
.site-nav-brand:hover { color: var(--accent-gold); }
.site-nav-mark { width: 22px; height: 22px; color: var(--accent-gold); flex: none; }
.site-nav-links { display: flex; align-items: center; gap: 1.75rem; }
.site-nav-links a {
    font-family: var(--display-font);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-gold);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}
.site-nav-links a:hover { color: var(--accent-gold-bright); }
.site-nav-links a[aria-current="page"] { color: var(--text-primary); }

/* Site footer: rule, mark, full title, links, legal line. */
.site-footer {
    text-align: center;
    padding: 3rem var(--gutter) 2.5rem;
    color: var(--text-muted);
}
.site-footer .rule-ornament { margin: 0 auto 1.5rem; }
.site-footer-mark { width: 18px; height: 18px; color: var(--accent-gold-dim); margin: 0 auto 1rem; display: block; }
.site-footer-title {
    font-family: var(--display-font);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
}
.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.75rem;
    margin: 0 0 1.25rem;
}
.site-footer-links a {
    font-family: var(--display-font);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent-gold-text);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}
.site-footer-links a:hover { color: var(--accent-gold-bright); }
.site-footer-legal {
    font-family: var(--reading-font);
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}
.site-footer-legal a { color: var(--accent-gold-text); text-decoration: none; }
.site-footer-legal a:hover { color: var(--accent-gold-bright); }

/* Soft page-to-page cross-fade, matching nellwatson.com. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
    .btn-primary, .btn-ghost, .site-nav-brand, .site-nav-links a, .site-footer-links a { transition: none; }
}

@media print {
    .site-nav, .site-footer-links, .btn-primary, .btn-ghost { display: none !important; }
}