/* Holotype UI — base.css
   Theme tokens, base element + body styling, links, vignette.
   Part 1/7 of the former styles.css; files are linked
   from index.html in order, so the cascade is unchanged. */

        /* ---- Theme tokens — Naturalist's Field Journal (dark ledger) ----
           Aesthetic: a researcher's expedition journal read by lamplight.
           Warm dark base, copper / brass / gold-leaf chrome, hairline rules,
           serif display + sans body + mono for technical readouts.

           Token naming: new tokens use the journal vocabulary
           (--bg-ink, --ink, --copper, --gold-leaf, …). The old slate/teal
           token names (--bg, --accent, --text, --danger …) are kept as
           aliases that point at the new palette so the existing cascade
           doesn't break — surfaces will migrate to the new names over the
           next redesign phases. */
        :root {
            /* ---- New (Field Journal) palette ---- */
            --bg-ink:        #1a1814;   /* deep ink — page background */
            --bg-vellum:     #252320;   /* charred-paper — surfaces, cards */
            --bg-vellum-2:   #2f2c28;   /* slightly raised surfaces */
            --rule:          #3d3933;   /* hairline borders */
            --rule-strong:   #5a5147;   /* dividers, frame edges */
            --ink:           #e8dcc4;   /* warm bone — primary text */
            --ink-muted:     #a89b80;   /* aged parchment — secondary */
            --ink-faint:     #6b6356;   /* fade — labels, captions */
            --ink-pen:       #a98f63;   /* faded iron-gall ink — handwritten notes */
            --copper:        #c98b56;   /* primary accent (was teal) */
            --copper-hover:  #d6a07a;   /* accent hover */
            --copper-dim:    rgba(201, 139, 86, 0.14);
            --brass:         #b8956a;   /* secondary chrome / hover */
            --oxblood:       #8c3a3a;   /* errors, declined status */
            --oxblood-bg:    rgba(140, 58, 58, 0.22);
            --oxblood-border:#5a2424;
            --oxblood-soft:  #d97a7a;   /* softened oxblood — father homolog B / recessive */
            --sage:          #6b8f6b;   /* finalized / success */
            --amethyst:      #9379b3;   /* "magic" phenotype category (elemental / glow / ornament) */
            --gold-leaf:     #d4af37;   /* mythic only */
            --gold-leaf-glow:rgba(212, 175, 55, 0.45);

            /* ---- Type stack ---- */
            --font-serif:    "EB Garamond", "Hoefler Text", "Iowan Old Style", Garamond, Georgia, serif;
            --font-sans:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
            --font-hand:     "Caveat", "Segoe Print", "Bradley Hand", cursive;

            /* ---- Motion primitives ---- */
            --motion-quick:  120ms ease-out;
            --motion-base:   280ms cubic-bezier(0.2, 0.7, 0.2, 1);
            --motion-slow:   800ms cubic-bezier(0.4, 0.0, 0.1, 1);
            --motion-shimmer:6s linear infinite;
            /* Ceremony reveal — the take-over curve shared by the two ritual
               modals' full-screen "living plate" entrance (Phase 0). Slower
               and weightier than --motion-base so a stage take-over reads as an
               event, not a popup; includes its own easing (do NOT append a
               second timing function in `transition`/`animation` — see the
               WebKit recipe in CLAUDE.md). */
            --motion-ceremony: 460ms cubic-bezier(0.16, 0.84, 0.3, 1);

            /* ---- Radius scale ---- */
            --radius-sm:     4px;
            --radius:        6px;        /* slightly tighter than before for the journal feel */
            --radius-lg:     10px;

            /* ---- Shadow ---- */
            --shadow:        0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.55);

            /* ---- Material kit (AAA polish): brass hardware + bevel lighting ----
               One top-left light source, named from the struck-brass button
               (components.css button.primary) so every plate / nameplate / well
               shares the exact ramp instead of re-deriving it. Restrained: low
               relief, no float at rest. Phases 2–5 lean on these. */
            --brass-face:    linear-gradient(180deg, #c89a64, #9a7846);
            --brass-face-hi: linear-gradient(180deg, #d8aa72, #a98552);   /* hover ramp */
            --bevel-raised:  inset 0 1px 0 rgba(255, 236, 200, 0.45),
                             inset 0 -2px 4px rgba(0, 0, 0, 0.32),
                             0 2px 4px rgba(0, 0, 0, 0.40);
            --bevel-pressed: inset 0 2px 5px rgba(0, 0, 0, 0.50);
            --edge-light:    inset 0 1px 0 rgba(232, 220, 196, 0.06);     /* faint top edge */
            /* Resting plate — a hairline-scored, faintly bevelled leaf (NOT a
               floating card): top catch-light, the 1px vellum scoring already
               triplicated across the flat surfaces, and a soft lower inner shade. */
            --plate-inset:   var(--edge-light),
                             inset 0 0 0 1px var(--bg-vellum-2),
                             inset 0 -1px 2px rgba(0, 0, 0, 0.32);
            --plate-shadow:  0 4px 14px rgba(0, 0, 0, 0.32);             /* hover/elevated lift */
            --well-inset:    inset 0 1px 3px rgba(0, 0, 0, 0.45);        /* carved-in wells */
            --text-emboss:   0 1px 0 rgba(255, 236, 200, 0.25);          /* struck-text shadow */

            /* ---- Deprecated aliases — keep until phases 2–5 migrate ----
               Existing CSS still references --bg, --accent, --text, etc.
               These point at the new palette so the cascade keeps working
               while we incrementally rewrite each surface. */
            --bg:           var(--bg-ink);
            --surface:      var(--bg-vellum);
            --surface-2:    var(--bg-vellum-2);
            --border:       var(--rule);
            --border-2:     var(--rule-strong);
            --text:         var(--ink);
            --text-muted:   var(--ink-muted);
            --text-faint:   var(--ink-faint);
            --accent:       var(--copper);
            --accent-hover: var(--copper-hover);
            --accent-soft:  var(--copper-dim);
            --danger:       var(--oxblood);
            --danger-bg:    var(--oxblood-bg);
            --danger-border:var(--oxblood-border);
        }

        /* ---- Specimen-pin heads — shared across views ----
           A creature's decorative pins (the library tile photo + its note
           slips, and the hero card's photo pin) all read the same colour so a
           specimen looks consistently "tacked down" everywhere. A `.pin-0..3`
           class — a stable hash of the creature id, set in app.js — selects one
           domed-head gradient via `--pin-grad`; every pin pseudo-element just
           resolves that token (falling back to brass). */
        .pin-0 { --pin-grad: radial-gradient(circle at 34% 30%, #edc78c, #6e4f29 82%); } /* brass */
        .pin-1 { --pin-grad: radial-gradient(circle at 34% 30%, #e6a36f, #6e3a1c 82%); } /* copper */
        .pin-2 { --pin-grad: radial-gradient(circle at 34% 30%, #d98a72, #6b241f 82%); } /* oxblood */
        .pin-3 { --pin-grad: radial-gradient(circle at 34% 30%, #a7c6ac, #3f5f49 82%); } /* verdigris */

        /* A small domed specimen pin tacking a portrait down. Two per photo —
           one in each upper corner — so a single centred pin doesn't crowd the
           creature's head. Same size as the note pins (5px); colour comes from
           the inherited --pin-grad (.pin-0..3 on the tile / card). The hero
           card scales these up a touch (card.css). */
        .specimen-pin {
            position: absolute;
            top: 5px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--pin-grad,
                radial-gradient(circle at 34% 30%, #edc78c, #6e4f29 82%));
            box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.6);
            z-index: 3;
            pointer-events: none;
        }
        .specimen-pin.is-left  { left: 6px; }
        .specimen-pin.is-right { right: 6px; }

        /* Inline currency/energy glyphs — the SAME line-art vessels as the dock
           plaque, rendered as text-sized inline SVG so they read crisply and
           inherit `currentColor` (gilt for discovery, copper for energy). They
           replace the bare ⚗/⚡ unicode glyphs, which fell back to weak/
           inconsistent OS renders. `.cur-ico` = a conical flask (discovery
           points); `.nrg-ico` = a bolt (battle energy). Used anywhere the
           context renders HTML; the few text-only spots (toasts, <option>s)
           spell the currency out in words instead. */
        .cur-ico, .nrg-ico {
            display: inline-block;
            width: 0.95em;
            height: 0.95em;
            vertical-align: -0.12em;     /* sit on the text baseline */
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        * { box-sizing: border-box; }

        /* Tint native form controls (checkboxes, radios, ranges, progress)
           with the copper accent so they match the field-journal palette
           instead of the browser/OS default blue. One declaration covers
           every checkbox in the app — the ☰ menu settings, the tutorial
           opt-out, etc. — and reads on both the dark vellum surfaces and the
           light parchment tutorial pages. */
        input[type="checkbox"],
        input[type="radio"],
        input[type="range"],
        progress {
            accent-color: var(--copper);
        }

        /* Global keyboard-focus ring — a copper outline on every
           focusable element. `:focus-visible` keeps it keyboard-only,
           so mouse interaction is unchanged. Inputs override this with
           their own copper-border treatment via a more-specific
           `:focus` rule; .mate-partner-tile keeps its box-shadow. */
        :focus-visible {
            outline: 2px solid var(--copper);
            outline-offset: 2px;
        }

        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            color: var(--ink);
            font-family: var(--font-sans);
            font-size: 15px;
            line-height: 1.55;
            font-feature-settings: "kern", "liga", "calt", "ss01";
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* The field camp — a lantern-lit sawn tree-stump on the dark
           forest floor (generated scene asset). The open field-notebook
           (the .page "book") rests on it. The scene is fixed and the
           viewport overflow is clipped: the book IS the interface, and
           content scrolls within its pages rather than the page itself. */
        body {
            background: #0a0806 url("/static/assets/scene.png")
                        center center / cover no-repeat fixed;
            overflow: hidden;
        }
        /* Deep-woods vignette — darkens the forest at the edges so the
           lit book holds the eye. */
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background: radial-gradient(ellipse 78% 82% at 50% 47%,
                transparent 36%, rgba(0, 0, 0, 0.66) 100%);
        }
        /* A faint warm wash — the lantern's pool of light around the book. */
        body::after {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            background: radial-gradient(ellipse 54% 50% at 50% 47%,
                rgba(232, 184, 120, 0.10), transparent 72%);
        }
        /* Interactive content sits above the scene + lighting layers. */
        body > * { position: relative; z-index: 1; }

        a {
            color: var(--copper);
            text-decoration-color: rgba(201, 139, 86, 0.4);
            text-underline-offset: 2px;
        }
        a:hover { color: var(--copper-hover); text-decoration-color: var(--copper-hover); }