/* ===========================================================================
   aubreyperin.com — shared theme
   ---------------------------------------------------------------------------
   One stylesheet for the whole site. Every page links this and declares
   nothing about colour or type of its own.

   ONE PALETTE, navy + gold, across the whole site. The writing, books and
   frameworks pages used to carry a separate brown-and-tan family; they were
   folded into this one so every page reads as the same site.

   FOUR MODES, set on <html> by js/theme.js:
     (no data-theme)            follow the operating system
     data-theme="light"
     data-theme="dark"
     data-theme="learning"      palette-independent. Dark reading ground,
                                Atkinson Hyperlegible, decorative colour
                                stripped so the only hues left carry meaning:
                                blue = right, orange = wrong (Okabe-Ito, safe
                                for all common forms of colour blindness).

   Values are declared ONCE, as primitives, in the first block. Everything
   below only remaps semantic names onto them.
   =========================================================================== */

/* --- 1. primitives: every colour the site uses, declared once -------------- */

:root {
    /* navy family — dark */
    --navy-d-bg-deep: #0c1320;
    --navy-d-bg-surface: #131c2e;
    --navy-d-bg-elevated: #1a2640;
    --navy-d-bg-hover: #243352;
    --navy-d-text-primary: #f1e9d8;
    --navy-d-text-secondary: #b3bccb;
    --navy-d-text-muted: #818ea4;
    --navy-d-accent-warm: #d6a94e;
    --navy-d-accent-gold: #e6c074;
    --navy-d-accent-ember: #df8a45;
    --navy-d-border-subtle: rgba(214, 169, 78, 0.13);
    --navy-d-border-warm: rgba(214, 169, 78, 0.26);
    --navy-d-nav-bg: rgba(12, 19, 32, 0.85);

    /* navy family — light */
    --navy-l-bg-deep: #f4efe2;
    --navy-l-bg-surface: #ebe4d4;
    --navy-l-bg-elevated: #e0d7c4;
    --navy-l-bg-hover: #d2c8b2;
    --navy-l-text-primary: #111d2e;
    --navy-l-text-secondary: #38485d;
    --navy-l-text-muted: #555f6d;
    --navy-l-accent-warm: #7d5714;
    --navy-l-accent-gold: #5e3f0b;
    --navy-l-accent-ember: #964816;
    --navy-l-border-subtle: rgba(17, 29, 46, 0.12);
    --navy-l-border-warm: rgba(17, 29, 46, 0.26);
    --navy-l-nav-bg: rgba(244, 239, 226, 0.9);



    /* semantic signals — these mean something, so they do not vary by family */
    --sig-red-dark: #d86f5e;
    --sig-red-light: #94301f;
    --sig-green-dark: #6f9a63;
    --sig-green-light: #3f5e36;

    /* type */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* --- 2. the dark default -------------------------------------------------- */

:root {
    --bg-deep: var(--navy-d-bg-deep);
    --bg-surface: var(--navy-d-bg-surface);
    --bg-elevated: var(--navy-d-bg-elevated);
    --bg-hover: var(--navy-d-bg-hover);
    --text-primary: var(--navy-d-text-primary);
    --text-secondary: var(--navy-d-text-secondary);
    --text-muted: var(--navy-d-text-muted);
    --accent-warm: var(--navy-d-accent-warm);
    --accent-gold: var(--navy-d-accent-gold);
    --accent-ember: var(--navy-d-accent-ember);
    --accent-red: var(--sig-red-dark);
    --accent-green: var(--sig-green-dark);
    --border-subtle: var(--navy-d-border-subtle);
    --border-warm: var(--navy-d-border-warm);
    --nav-bg: var(--navy-d-nav-bg);
    --on-accent: #0c1320;
}

/* --- 3. light ------------------------------------------------------------- */

/* explicit choice */
:root[data-theme="light"] {
    --bg-deep: var(--navy-l-bg-deep);
    --bg-surface: var(--navy-l-bg-surface);
    --bg-elevated: var(--navy-l-bg-elevated);
    --bg-hover: var(--navy-l-bg-hover);
    --text-primary: var(--navy-l-text-primary);
    --text-secondary: var(--navy-l-text-secondary);
    --text-muted: var(--navy-l-text-muted);
    --accent-warm: var(--navy-l-accent-warm);
    --accent-gold: var(--navy-l-accent-gold);
    --accent-ember: var(--navy-l-accent-ember);
    --accent-red: var(--sig-red-light);
    --accent-green: var(--sig-green-light);
    --border-subtle: var(--navy-l-border-subtle);
    --border-warm: var(--navy-l-border-warm);
    --nav-bg: var(--navy-l-nav-bg);
    --on-accent: #f4efe2;
}

/* following the system, with no explicit choice stored. Kept so the page is
   correct before js/theme.js runs, and correct if it never runs at all. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg-deep: var(--navy-l-bg-deep);
        --bg-surface: var(--navy-l-bg-surface);
        --bg-elevated: var(--navy-l-bg-elevated);
        --bg-hover: var(--navy-l-bg-hover);
        --text-primary: var(--navy-l-text-primary);
        --text-secondary: var(--navy-l-text-secondary);
        --text-muted: var(--navy-l-text-muted);
        --accent-warm: var(--navy-l-accent-warm);
        --accent-gold: var(--navy-l-accent-gold);
        --accent-ember: var(--navy-l-accent-ember);
        --accent-red: var(--sig-red-light);
        --accent-green: var(--sig-green-light);
        --border-subtle: var(--navy-l-border-subtle);
        --border-warm: var(--navy-l-border-warm);
        --nav-bg: var(--navy-l-nav-bg);
        --on-accent: #f4efe2;
    }
    }

/* --- 4. dark, chosen explicitly ------------------------------------------- */

:root[data-theme="dark"] {
    --bg-deep: var(--navy-d-bg-deep);
    --bg-surface: var(--navy-d-bg-surface);
    --bg-elevated: var(--navy-d-bg-elevated);
    --bg-hover: var(--navy-d-bg-hover);
    --text-primary: var(--navy-d-text-primary);
    --text-secondary: var(--navy-d-text-secondary);
    --text-muted: var(--navy-d-text-muted);
    --accent-warm: var(--navy-d-accent-warm);
    --accent-gold: var(--navy-d-accent-gold);
    --accent-ember: var(--navy-d-accent-ember);
    --accent-red: var(--sig-red-dark);
    --accent-green: var(--sig-green-dark);
    --border-subtle: var(--navy-d-border-subtle);
    --border-warm: var(--navy-d-border-warm);
    --nav-bg: var(--navy-d-nav-bg);
    --on-accent: #0c1320;
}

/* --- 5. learning mode ----------------------------------------------------- */

:root[data-theme="learning"] {
    --bg-deep: #14161a;
    --bg-surface: #1c1f25;
    --bg-elevated: #252931;
    --bg-hover: #31363f;
    --text-primary: #e9e7e2;
    --text-secondary: #bcb9b2;
    --text-muted: #929089;
    --accent-warm: #b9b5ac;
    --accent-gold: #d8d4cb;
    --accent-ember: #b9b5ac;
    --accent-red: #e69f00;   /* Okabe-Ito orange — wrong */
    --accent-green: #56b4e9; /* Okabe-Ito blue   — right */
    --border-subtle: rgba(233, 231, 226, 0.12);
    --border-warm: rgba(233, 231, 226, 0.3);
    --nav-bg: rgba(20, 22, 26, 0.93);
    --on-accent: #14161a;
    --font-display: 'Atkinson Hyperlegible', 'Source Sans 3', sans-serif;
    --font-body: 'Atkinson Hyperlegible', 'Source Sans 3', sans-serif;
}

:root[data-theme="learning"] body { font-weight: 400; line-height: 1.8; }
:root[data-theme="learning"] body::before { display: none; }
:root[data-theme="learning"] ::selection { background: #3a4149; color: #f2f0ec; }
:root[data-theme="learning"] p,
:root[data-theme="learning"] li,
:root[data-theme="learning"] .lede { max-width: 68ch; }

/* --- 6. base layer -------------------------------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

::selection { background: var(--accent-red); color: var(--text-primary); }

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-ember) var(--bg-deep);
    color-scheme: dark;
}
:root[data-theme="light"] html, :root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; } }

body {
    font-family: var(--font-body);
    background-color: var(--bg-deep);
    color: var(--text-primary);
    line-height: 1.7;
    font-weight: 300;
    overflow-x: hidden;
}

/* the paper grain. Suppressed in learning mode and for reduced-motion users. */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
}

a { color: var(--accent-gold); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- 7. site navigation --------------------------------------------------- */

nav.site-nav {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
}
nav.site-nav .nav-inner {
    max-width: 1100px; margin: 0 auto; padding: 1rem 2rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
nav.site-nav .nav-name {
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
    color: var(--text-primary); letter-spacing: 0.02em;
    text-decoration: none; white-space: nowrap;
}
nav.site-nav .nav-course {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--text-muted);
}
nav.site-nav .nav-links { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
nav.site-nav .nav-links a {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-secondary);
    text-decoration: none; transition: color 0.2s ease;
}
nav.site-nav .nav-links a:hover { color: var(--accent-gold); }
nav.site-nav .nav-links a[aria-current="page"] { color: var(--accent-warm); }

/* legacy: pages still carrying a bare <nav> get the same treatment */
body > nav:not(.site-nav) {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
}

/* --- 8. the mode switch --------------------------------------------------- */

.theme-switch {
    display: flex; gap: 2px; padding: 3px;
    border: 1px solid var(--border-subtle); border-radius: 4px;
    background: var(--bg-surface); flex-shrink: 0;
}
.theme-opt {
    font-family: var(--font-mono); font-size: 0.62rem; font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
    background: none; border: none; border-radius: 3px;
    padding: 0.3rem 0.5rem; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.theme-opt:hover { color: var(--text-primary); }
.theme-opt[aria-pressed="true"] {
    background: var(--bg-elevated); color: var(--accent-warm);
}

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

@media (max-width: 560px) {
    nav.site-nav .nav-inner { padding: 0.8rem 1rem; }
    nav.site-nav .nav-course { display: none; }
    .theme-opt { padding: 0.3rem 0.4rem; font-size: 0.58rem; }
}

/* --- 9. cross-ribbon: the bridge between the study side and the rest ------ */

.cross-ribbon {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    max-width: 1100px; margin: 0 auto 2rem; padding: 0.85rem 1.25rem;
    background: var(--bg-surface); border: 1px solid var(--border-subtle);
    border-left: 2px solid var(--accent-warm); border-radius: 3px;
    text-decoration: none; color: inherit;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.cross-ribbon:hover { background: var(--bg-elevated); border-color: var(--border-warm);
    border-left-color: var(--accent-gold); }
.cross-ribbon .cr-label {
    font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--accent-warm); white-space: nowrap;
}
.cross-ribbon .cr-text { font-size: 0.9rem; color: var(--text-secondary); flex: 1 1 18rem; }
.cross-ribbon .cr-go {
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--accent-gold); white-space: nowrap; margin-left: auto;
}
.cross-ribbon.is-top { margin-top: 0; }
.cross-ribbon.is-bottom { margin: 3.5rem auto 2rem; }

@media (max-width: 620px) {
    .cross-ribbon { gap: 0.4rem; }
    .cross-ribbon .cr-go { margin-left: 0; }
}

/* --- 10. book formats table ---------------------------------------------- */

.formats-section { padding: 4rem 0 1rem; }
.formats-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.formats-label { font-family: var(--font-mono); font-size: 0.68rem; color: var(--accent-warm);
  letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 1.1rem; }
.formats-heading { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 400; line-height: 1.2; margin-bottom: 1.25rem; }
.formats { margin-top: 2rem; max-width: 860px; border: 1px solid var(--border-subtle);
  border-radius: 3px; overflow: hidden; }
.format-row { display: grid; grid-template-columns: 1.3fr 1fr 0.6fr auto; gap: 1rem;
  align-items: center; padding: 1.1rem 1.4rem; background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle); }
.format-row:last-child { border-bottom: none; }
.format-row .fmt { font-weight: 500; }
.format-row .fmt small { display: block; font-weight: 300; font-size: 0.83rem; color: var(--text-muted); }
.format-row .where { color: var(--text-secondary); font-size: 0.93rem; }
.format-row .price { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text-primary); }
.format-row .btn { padding: 0.6rem 1.1rem; font-size: 0.86rem; }
.formats-note { margin-top: 1rem; font-size: 0.85rem; color: var(--text-muted); max-width: 60ch; }

@media (max-width: 760px) {
  .formats-inner { padding: 0 1rem; }
  .format-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .format-row .btn { justify-self: start; margin-top: 0.4rem; }
}