/* ============================================================
   Battle March Campaign Manager — design tokens + base styles

   Original palette (navy + gold). Typography is Cinzel for display
   and EB Garamond for text, both SIL Open Font License, self-hosted
   under /assets/fonts/ — no external request at render time.

   Light and dark are a token swap over ONE palette, not two
   stylesheets. Three-state theming:
     :root                                  -> light values
     prefers-color-scheme: dark             -> dark, unless the user
                                               explicitly chose light
     [data-theme="dark"] / ="light"         -> explicit choice wins

   Pages carry almost no classes, so element selectors do the work
   here. Anything added later should prefer tokens over literals.
   ============================================================ */

/* ---------- Faces ---------- */

@font-face {
    font-family: 'Cinzel';
    src: url('/assets/fonts/cinzel-normal.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('/assets/fonts/ebgaramond-normal.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EB Garamond';
    src: url('/assets/fonts/ebgaramond-italic.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

/* ---------- Tokens: light ---------- */

:root {
    /* Raw palette. Semantic tokens below reference these; components
       should reference the semantic names, never these directly. */
    --navy-deep-1:   #0B1C3A;
    --navy-deep-2:   #122B4F;
    --navy-mid-1:    #1E3A6E;
    --navy-mid-2:    #2A4A7A;
    --navy-light-1:  #3A6EA5;
    --navy-light-2:  #4A7DB5;

    --gold-warm-1:   #C9A227;
    --gold-warm-2:   #D4AF37;
    --gold-bright-1: #E8C547;
    --gold-bright-2: #F0D060;
    --gold-antique-1:#A67C00;
    --gold-antique-2:#B8860B;

    /* Surfaces */
    --bg:            #F7F4EC;
    --bg-raised:     #FFFDF7;
    --bg-sunken:     #EFEADC;
    --bg-inverse:    var(--navy-deep-1);

    /* Text. Gold is decorative in light mode, never body text —
       #D4AF37 on a light ground is ~1.9:1 and unreadable. The antique
       tone is the only gold used near text here. */
    --text:          var(--navy-deep-2);
    --text-muted:    #55617A;
    --text-inverse:  #F7F4EC;
    --text-on-accent:var(--navy-deep-1);

    --accent:        var(--gold-antique-1);
    --accent-strong: var(--gold-antique-2);
    --accent-quiet:  var(--gold-warm-2);

    --link:          var(--navy-mid-1);
    --link-hover:    var(--navy-light-1);

    --border:        #D9D0BA;
    --border-strong: var(--navy-mid-2);
    --rule:          var(--gold-warm-2);

    --header-bg:     var(--navy-deep-1);
    --header-text:   var(--gold-bright-1);

    --th-bg:         var(--navy-deep-2);
    --th-text:       var(--gold-bright-1);
    --row-alt:       #F1ECE0;

    --ok:            #1F6B3A;
    --ok-bg:         #E4F1E7;
    --danger:        #96201C;
    --danger-bg:     #F8E6E4;
    --warn:          #8A6100;
    --warn-bg:       #FBF1DA;

    --pin:           #B4342E;
    --pin-ring:      #FFFDF7;

    --focus:         var(--navy-light-1);
    --shadow:        0 1px 2px rgba(11, 28, 58, .08), 0 4px 14px rgba(11, 28, 58, .06);

    /* Type */
    --font-display:  'Cinzel', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --font-body:     'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --font-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --step--1: .875rem;
    --step-0:  1.0625rem;
    --step-1:  1.25rem;
    --step-2:  1.5rem;
    --step-3:  1.9rem;
    --step-4:  2.4rem;

    /* Space */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;

    --radius: 3px;
}

/* ---------- Tokens: dark ---------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            var(--navy-deep-1);
        --bg-raised:     var(--navy-deep-2);
        --bg-sunken:     #08152B;
        --bg-inverse:    #F7F4EC;

        --text:          #E8E4D9;
        --text-muted:    #9DAAC4;
        --text-inverse:  var(--navy-deep-1);
        --text-on-accent:var(--navy-deep-1);

        --accent:        var(--gold-warm-2);
        --accent-strong: var(--gold-bright-1);
        --accent-quiet:  var(--gold-antique-2);

        --link:          var(--gold-bright-1);
        --link-hover:    var(--gold-bright-2);

        --border:        #23375C;
        --border-strong: var(--navy-light-1);
        --rule:          var(--gold-antique-2);

        --header-bg:     var(--navy-deep-2);
        --header-text:   var(--gold-bright-1);

        --th-bg:         var(--navy-mid-1);
        --th-text:       var(--gold-bright-1);
        --row-alt:       #0F2342;

        --ok:            #6FD08C;
        --ok-bg:         #10301D;
        --danger:        #FF9A93;
        --danger-bg:     #3A1614;
        --warn:          var(--gold-bright-1);
        --warn-bg:       #33280A;

        --pin:           #E5564E;
        --pin-ring:      #0B1C3A;

        --focus:         var(--gold-bright-1);
        --shadow:        0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    }
}

:root[data-theme="dark"] {
    --bg:            var(--navy-deep-1);
    --bg-raised:     var(--navy-deep-2);
    --bg-sunken:     #08152B;
    --bg-inverse:    #F7F4EC;

    --text:          #E8E4D9;
    --text-muted:    #9DAAC4;
    --text-inverse:  var(--navy-deep-1);
    --text-on-accent:var(--navy-deep-1);

    --accent:        var(--gold-warm-2);
    --accent-strong: var(--gold-bright-1);
    --accent-quiet:  var(--gold-antique-2);

    --link:          var(--gold-bright-1);
    --link-hover:    var(--gold-bright-2);

    --border:        #23375C;
    --border-strong: var(--navy-light-1);
    --rule:          var(--gold-antique-2);

    --header-bg:     var(--navy-deep-2);
    --header-text:   var(--gold-bright-1);

    --th-bg:         var(--navy-mid-1);
    --th-text:       var(--gold-bright-1);
    --row-alt:       #0F2342;

    --ok:            #6FD08C;
    --ok-bg:         #10301D;
    --danger:        #FF9A93;
    --danger-bg:     #3A1614;
    --warn:          var(--gold-bright-1);
    --warn-bg:       #33280A;

    --pin:           #E5564E;
    --pin-ring:      #0B1C3A;

    --focus:         var(--gold-bright-1);
    --shadow:        0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0 auto;
    max-width: 78rem;
    padding: var(--sp-5) var(--sp-5) var(--sp-7);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
    margin: var(--sp-6) 0 var(--sp-3);
    letter-spacing: .01em;
}

h1 {
    font-size: var(--step-4);
    margin-top: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 2px solid var(--rule);
}

h2 { font-size: var(--step-2); color: var(--accent-strong); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }

p { margin: 0 0 var(--sp-4); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

small { font-size: var(--step--1); color: var(--text-muted); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
code, pre { font-family: var(--font-mono); font-size: .9em; }

pre {
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    overflow-x: auto;
}

/* ---------- Tables ----------
   Pages use <table border="1" cellpadding="6">. These rules override
   those presentational attributes, so no markup change is needed. */

table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 var(--sp-5);
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: var(--step--1);
}

th, td {
    border: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-3);
    text-align: left;
    vertical-align: top;
}

th {
    background: var(--th-bg);
    color: var(--th-text);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--step--1);
    letter-spacing: .04em;
    border-color: var(--border-strong);
}

tbody tr:nth-child(even), tr:nth-child(even) { background: var(--row-alt); }
tr:nth-child(even) th { background: var(--th-bg); }

/* Wide tables scroll rather than pushing the page sideways. */
.table-scroll { overflow-x: auto; }

/* ---------- Forms ---------- */

label {
    display: inline-block;
    margin-bottom: var(--sp-2);
    color: var(--text);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="search"], input[type="url"], select, textarea {
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--text);
    background: var(--bg-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    max-width: 100%;
}

textarea { width: 100%; min-height: 8rem; line-height: 1.5; }

input[type="file"] { font-family: var(--font-body); color: var(--text); }

/* Checkboxes and radios otherwise stay browser-grey and read as
   disabled against the navy ground. */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--accent-quiet);
    width: 1rem;
    height: 1rem;
    vertical-align: -.15em;
}

button, input[type="submit"] {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-on-accent);
    background: var(--accent-quiet);
    border: 1px solid var(--accent-strong);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-4);
    cursor: pointer;
}

button:hover, input[type="submit"]:hover { background: var(--gold-bright-1); }
button:disabled { opacity: .55; cursor: not-allowed; }

/* Secondary / destructive actions opt in by class. */
button.secondary {
    background: transparent;
    color: var(--link);
    border-color: var(--border-strong);
}
button.secondary:hover { background: var(--bg-sunken); }

button.danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}
button.danger:hover { background: var(--danger-bg); }

/* ---------- Status messaging ---------- */

.msg-error, .msg-ok, .msg-warn {
    border-left: 4px solid;
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    margin: 0 0 var(--sp-4);
}

.msg-error { color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
.msg-ok    { color: var(--ok);     background: var(--ok-bg);     border-color: var(--ok); }
.msg-warn  { color: var(--warn);   background: var(--warn-bg);   border-color: var(--warn); }

.muted { color: var(--text-muted); }

/* ---------- Cards ----------
   Replaces the repeated inline `border:1px solid #999` blocks. Three
   variants matched the three colors already in use: neutral, an amber
   "needs attention / pending review" state, and an approved state. */

.card, .card-attention, .card-ok {
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.card            { border-left-color: var(--border-strong); }
.card-attention  { border-left-color: var(--warn); background: var(--warn-bg); }
.card-ok         { border-left-color: var(--ok); background: var(--ok-bg); }

.card > :last-child, .card-attention > :last-child, .card-ok > :last-child { margin-bottom: 0; }

.card-grid { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.card-grid > * { flex: 1 1 18rem; }

img.framed-image, .framed-image {
    max-width: 100%;
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ---------- Chrome ---------- */

.site-footer {
    margin-top: var(--sp-7);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: var(--step--1);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    justify-content: space-between;
    align-items: baseline;
}

.theme-switch { display: inline-flex; gap: var(--sp-2); align-items: baseline; }
.theme-switch form { display: inline; }

.theme-switch button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--step--1);
    letter-spacing: 0;
}

.theme-switch button:hover { background: var(--bg-sunken); color: var(--text); }
.theme-switch button[aria-pressed="true"] {
    background: var(--accent-quiet);
    color: var(--text-on-accent);
    border-color: var(--accent-strong);
}

/* ---------- Responsive ---------- */

@media (max-width: 40rem) {
    body { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
    h1 { font-size: var(--step-3); }
    h2 { font-size: var(--step-1); }
    table { font-size: .8rem; }
    th, td { padding: var(--sp-1) var(--sp-2); }
}

@media print {
    body { max-width: none; background: #fff; color: #000; }
    .site-footer, .theme-switch { display: none; }
    a { color: #000; }
}