/* ==========================================================================\n+   tudor.css - TudorLexicon light theme\n+   Folio palette and scholarly typography from the approved art brief.\n+   Version 4.0.0 - 2026-08-02\n+   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&family=Libre+Baskerville:wght@400;700&display=swap');

@font-face {
    font-family: 'Charis SIL IPA';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/CharisSIL-Regular.subset.woff2') format('woff2');
}

/* ========== THEME TOKENS ========== */

:root {
    color-scheme: light;
    --parchment: #F7F3EB;
    --paper: #FDFCFA;
    --stone: #D6D0C7;
    --rule-soft: #E8E1D6;
    --ink: #101010;
    --ink-soft: #5A5550;
    --gold: #C9A86A;
    --forest: #2E3D2F;
    --tudor-red: #8C1D18;
    --display: 'Cormorant Garamond', Georgia, serif;
    --body: 'EB Garamond', Georgia, serif;
    --meta: 'Libre Baskerville', Georgia, serif;
    --ui: Inter, system-ui, sans-serif;
    --mono: 'SFMono-Regular', Consolas, monospace;
    --rg-0: #8C1D18;
    --rg-1: #2E3D2F;
    --rg-2: #9A6D24;
    --rg-3: #3E5C74;
    --rg-4: #7A3E63;
    --rg-5: #6E5B2A;
}

/* ========== PAGE AND TYPE ========== */

html { background: var(--parchment); }
body {
    color: var(--ink);
    font-family: var(--body);
    background:
        radial-gradient(circle at 12% 14%, rgba(201, 168, 106, 0.10), transparent 30rem),
        radial-gradient(circle at 88% 80%, rgba(46, 61, 47, 0.07), transparent 34rem),
        var(--parchment);
    background-attachment: fixed;
}

h1, h2, h3, .wordmark, .brand-copy { font-family: var(--display); }
.eyebrow, .folio-meta, .brand-copy small, .panel-kicker, .tool-pane > label,
.sync-control, .library-heading p:first-child, .corpus-fieldset legend,
.corpus-fieldset label, .reading .byline { font-family: var(--meta); color: var(--ink-soft); }
a { color: var(--forest); }
a:hover { color: var(--tudor-red); }
::selection { background: rgba(201, 168, 106, 0.34); }
:focus-visible { outline: 2px solid var(--tudor-red); outline-offset: 2px; }

/* ========== SITE CHROME ========== */

.site-header { color: var(--ink); }
.wordmark, .brand-lockup { color: var(--ink); }
.wordmark::before {
    content: '✣';
    color: var(--tudor-red);
    font-size: 1.25rem;
}
.brand-copy { font-size: 1.45rem; }
.brand-copy small { font-size: 0.56rem; }
.site-header nav a, .theme-toggle { color: var(--ink-soft); font-family: var(--ui); font-size: 0.76rem; }
.site-header nav a:hover, .theme-toggle:hover { color: var(--tudor-red); }
.site-rule, .progress-bar { background: var(--gold); }
.skip { color: var(--paper); background: var(--ink); }

/* ========== TOOL COMPONENTS ========== */

.hero-strip .mission, .library-help, .selector-note, .corpus-status, .share-hint, .meta { color: var(--ink-soft); }
.corpus-library, .groups, main.reading { border-color: var(--stone); background: rgba(253, 252, 250, 0.72); }
.corpus-fieldset { border-color: var(--rule-soft); background: rgba(247, 243, 235, 0.58); }
.corpus-fieldset select, textarea[data-role="input"], [data-role="modern-pane"], [data-role="ipa-pane"] {
    color: var(--ink);
    border-color: var(--stone);
    background: rgba(253, 252, 250, 0.93);
}
.selector-action button, .share-btn {
    color: var(--paper);
    border-color: var(--forest);
    background: var(--forest);
    font-family: var(--ui);
    font-size: 0.74rem;
}
.selector-action button:hover, .share-btn:hover { border-color: var(--tudor-red); background: var(--tudor-red); }
.selector-action button:disabled { color: var(--ink-soft); border-color: var(--stone); background: var(--rule-soft); opacity: 0.7; }
.corpus-status { color: var(--forest); font-family: var(--ui); }
.work-progress { border-color: var(--rule-soft); font-family: var(--ui); font-size: 0.72rem; }
.progress-track { background: var(--rule-soft); }
.progress-spin { border-color: var(--tudor-red); border-right-color: transparent; }
.groups { background: rgba(214, 208, 199, 0.26); }
.groups .restored-badge { color: var(--paper); background: var(--tudor-red); }
.rg { color: var(--ink); border-color: var(--stone); background: var(--paper); }
.rg.is-restored { border-left-color: var(--tudor-red); }
.rg .rg-key, .rg .ipa { color: var(--forest); }
.rg-restored { color: var(--tudor-red); }
.rg-persist, .rg-broad-badge, .ln-no { color: var(--ink-soft); }
.w.term.restored { color: var(--tudor-red); background: linear-gradient(transparent 64%, rgba(140, 29, 24, 0.13) 64%); }
.rg-0, .rg.rg-0 { color: var(--rg-0); }
.rg-1, .rg.rg-1 { color: var(--rg-1); }
.rg-2, .rg.rg-2 { color: var(--rg-2); }
.rg-3, .rg.rg-3 { color: var(--rg-3); }
.rg-4, .rg.rg-4 { color: var(--rg-4); }
.rg-5, .rg.rg-5 { color: var(--rg-5); }
.tool-pane > label { color: var(--forest); }
textarea[data-role="input"], [data-role="modern-pane"] { font-family: var(--body); }
.sync-control { color: var(--ink-soft); }
.reading h2, footer, footer.site-footer { border-color: var(--stone); }
.reading .related { border-color: var(--gold); background: rgba(201, 168, 106, 0.08); }

/* ========== FOLIO ORNAMENT ========== */

.brand-mark .rose-ring, .brand-mark .rose-petal { fill: none; stroke: currentColor; stroke-width: 1.2; }
.brand-mark { color: var(--tudor-red); }
.hero-strip::before {
    content: '';
    position: absolute;
    width: 7rem;
    height: 7rem;
    right: 3vw;
    top: 4rem;
    opacity: 0.025;
    border: 1rem double var(--ink);
    border-radius: 50%;
    pointer-events: none;
}
.hero-strip { position: relative; }
.hero-quotation {
    max-width: 36rem;
    margin: 0 0 1rem;
    padding: 0.7rem 0 0.7rem 1rem;
    border-left: 3px solid var(--gold);
    color: var(--forest);
    font-family: var(--body);
    font-size: 1.12rem;
    line-height: 1.35;
}
.hero-quotation p { margin: 0; }
.hero-quotation cite {
    display: block;
    margin-top: 0.45rem;
    color: var(--ink-soft);
    font-family: var(--meta);
    font-size: 0.67rem;
    font-style: normal;
    letter-spacing: 0.03em;
}

@media print {
    body { color: #000; background: #fff; }
}