/* ===== GILDED — a skin over Shadow (moved out of styles.css 2026-09-14) =====
   The html element carries data-theme="dark" AND data-skin="gilded"; the doubled selector
   outranks the plain dark rules by one attribute, so these win wherever those sit.
   Loaded from index.html after styles.css; see public/themes/README.md for the whole
   arrangement and _template.css for adding a theme. */
/* --- GILDED (2026-08-22) ---
   A third theme, not a replacement: Royal (light) and Shadow (dark) are untouched, and this
   sits beside them in the same cycle. The look is the modern product-page treatment — a
   near-black ground, glass panels, pill buttons, and display type that is large, tight and
   sentence-case instead of small, spaced and shouted.

   IT IS A SKIN ON TOP OF DARK, NOT A THIRD PARALLEL THEME, and that is the important
   structural decision here. The html element carries `data-theme="dark" data-skin="gilded"`,
   so every one of the nineteen `[data-theme="dark"]` fixes already in this file — the tag
   backgrounds, the overlay scrims, the crest plate, the chip wrapper, the rep bar — applies
   to Gilded for free, and so will every dark fix written from now on. A parallel
   `[data-theme="gilded"]` would have inherited NONE of them, and the failure mode is the bad
   kind: silent, and only visible on whichever screen nobody checked.
   The selectors below are doubled (`[data-theme="dark"][data-skin="gilded"]`) to raise them
   one attribute above the plain dark rules, so a Gilded override wins no matter where in the
   file the dark rule it is overriding happens to sit. Specificity rather than source order,
   because source order is a promise the next edit can quietly break.
   It keeps the site's OWN identity rather than importing someone else's: the accent is the
   antique gold from the Royal theme, lifted for a dark ground. The reference this came from
   used a saturated green, which belongs to that product and not to this one.
   Everything shape-related is done by overriding the tokens declared in :root, so a component
   only ever had to be taught to read a token once. Rules further down add the things a token
   cannot express — blur, gradients, fills. */
[data-theme="dark"][data-skin="gilded"] {
    /* One ground, faintly cool rather than pure black: pure #000 makes the glass panels read
       as grey rectangles because there is nothing behind them to show through. */
    --bg-body: #08090b;
    --bg-panel: #101216;
    --nav-color: #090a0d; --op-nav: 72%;         /* was rgba(9, 10, 13, 0.72): the same, as colour × alpha (OVERLAY OPACITY, royal.css) */

    --text-main: #f3f3f1;
    /* The reference's body copy is deliberately quiet. Kept above 4.5:1 on --bg-body all the
       same: quiet is a design choice, unreadable is a bug. #9c9c98 measures 7.0:1 here. */
    --text-muted: #9c9c98;
    --text-hint: #adada8;

    /* Antique gold, lifted for a dark ground. --gold is the FILL (buttons, borders, glows),
       --gold-text is the READ value; same split and same reasoning as the other two themes.
       MEASURED, worst case first, against every surface in this palette including the glass
       panel composited over the ground (which is the one a spot-check would miss):
         --text-main   15.49:1   --gold-text   10.57:1
         --text-hint    7.64:1   --danger-text  6.20:1
         --ok           7.43:1   --text-muted   6.25:1
       All on --bg-alt, the lightest surface here; body/panel/glass are 1-2 points higher.
       The filled primary pill is near-black on --gold at 9.8:1. Re-measure against --bg-alt
       if any of these move — it is the one that decides. */
    --gold: #d8b34a;
    --gold-text: #e8c86a;
    --gold-light: rgba(216, 179, 74, 0.12);

    /* Hairline borders rather than drawn lines — the glass edge does the separating. */
    --border: rgba(255, 255, 255, 0.10);
    --border-gold: rgba(216, 179, 74, 0.32);

    /* Status colours come from the Shadow theme, which already solved them for a dark
       ground; re-deriving them here would only invite the two to drift apart. */
    --success: #2f9e63;
    --danger: #e05260;
    --info: #4bb3c4;
    --warn: #e0a33a;
    --danger-text: #ff6b6b;
    --ok: #4fbe8a;

    --bg-alt: #1a1b1f;
    --bg-card: #101216;
    --bg-input: rgba(255, 255, 255, 0.04);
    --paper-ink: 8, 9, 11;
    /* Gilded tolerates a thinner veil than Shadow does — its text tokens are brighter, so they
       survive more of the artwork showing through. Measured floor 0.80; 0.82 for margin. */
    --paper-centre: 0.82;
    --paper-mid: 0.90;

    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 14px 44px rgba(216, 179, 74, 0.16);

    /* --- shape --- */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-btn: 999px;                              /* pills */
    --r-panel: 18px;
    --r-field: 12px;
    /* Glass, not a fill. Was rgba(255, 255, 255, 0.035) — a white tint; now the same tint
       expressed as a lifted grey at 30%, so the Cards & panels slider can raise it (OVERLAY
       OPACITY, royal.css). Over the near-black ground the two composite within a shade. */
    --card-color: #23262e; --op-panel: 30%;
    --panel-border: rgba(255, 255, 255, 0.09);
    --btn-weight: 500;
    /* Near-black on the gold fill: 9.8:1, against 2.01:1 if the inherited #fff were kept.
       This is the single line that fixes every accent-filled control in the theme at once. */
    --on-gold: #0b0b0d;

    /* --- type ---
       The hierarchy inverts. Royal shouts its headings (uppercase, tracked out) and whispers
       everything else; this does the opposite — the heading is large, tight and sentence-case,
       and the SMALL text is what gets the uppercase tracking. That is what makes the reference
       read as modern rather than merely dark. */
    --h1-transform: none;
    --h1-tracking: -0.02em;
    --h1-weight: 500;
    --h1-color: var(--text-main);
    --h2-rule: none;
    --h2-rule-gap: 0;
    --h2-tracking: -0.01em;
}

/* --- Gilded: the parts a token cannot express ---
   Everything below ADDS a property (a gradient, a fill, a blur) rather than swapping a value,
   which is exactly why it is scoped here instead of being a token: Royal and Shadow should not
   carry the cost of a treatment they never use. */

/* The ground is not flat. Two very low-opacity pools of gold, one high-left and one
   mid-right, give the page somewhere for the glass panels to sit — over a truly flat black
   a translucent panel just reads as a grey rectangle. `fixed` so it does not slide as the
   page scrolls, which is what makes it feel like light rather than wallpaper. */
/* Four layers now, first on top: Gilded's two pools of gold light, then the paper wash, then
   the artwork. The pools have to stay ABOVE the wash or the wash washes them out, and the
   backdrop has to be re-listed here because this rule replaces the whole background-image
   list — dropping it would silently turn the picture off in this theme alone. */
[data-theme="dark"][data-skin="gilded"] body {
    background-color: var(--bg-body);
    background-image:
        radial-gradient(1100px 620px at 12% -8%, rgba(216, 179, 74, 0.10), transparent 62%),
        radial-gradient(900px 520px at 92% 12%, rgba(216, 179, 74, 0.055), transparent 60%),
        var(--paper-wash),
        var(--backdrop);
    /* FIVE layers now, because --backdrop expands to two (the real file and its placeholder).
       These lists are written out in full rather than left to CSS's cycling rule: a list
       shorter than the image list repeats from the start, which would have handed the
       placeholder `auto` and `0 0` and left it unscaled in the corner. Keep them in step if
       --backdrop ever changes length. */
    background-size: auto, auto, cover, cover, cover;
    background-position: 0 0, 0 0, center center, center center, center center;
    background-attachment: fixed, fixed, fixed, fixed, fixed;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* The header is the ONE surface that gets a real backdrop blur. It is deliberately the only
   one: `.card` is used by the database result grid, which can put fifty of them on screen at
   once, and fifty blurred backdrops is a genuine frame-rate cost for an effect nobody can see
   — the ground behind a card is a slow gradient, so blurring it changes almost nothing. The
   header floats over actual scrolling content, where it reads. */
[data-theme="dark"][data-skin="gilded"] #site-nav {
    background: var(--bg-nav);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Display type. The app never set an h1 size, so it ran at the browser's 2em; the reference's
   whole character is in a heading large enough to be architecture rather than a label.
   clamp() so it is that on a monitor and still sane on a phone. */
[data-theme="dark"][data-skin="gilded"] h1 { font-size: clamp(2rem, 4.2vw, 3.15rem); line-height: 1.06; }
[data-theme="dark"][data-skin="gilded"] h2 { font-weight: 400; }

/* Buttons. Two weights, as in the reference: a filled pill for the one action that matters
   and a glass pill for everything else. The fill is GOLD rather than the reference's white —
   white would be a fourth surface colour with no relationship to the rest of the palette. */
[data-theme="dark"][data-skin="gilded"] .action-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"][data-skin="gilded"] .action-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-gold);
}
[data-theme="dark"][data-skin="gilded"] .action-btn.cs-primary,
[data-theme="dark"][data-skin="gilded"] .action-btn.btn-own {
    background: var(--gold);
    border-color: var(--gold);
    /* Near-black on the gold fill: 9.8:1. The gold-as-text token is for gold ON dark, which
       is the opposite problem and would be unreadable here. */
    color: #0b0b0d;
    font-weight: 600;
}
[data-theme="dark"][data-skin="gilded"] .action-btn.cs-primary:hover:not(:disabled),
[data-theme="dark"][data-skin="gilded"] .action-btn.btn-own:hover:not(:disabled) {
    background: var(--gold-text);
    border-color: var(--gold-text);
    color: #0b0b0d;
}
[data-theme="dark"][data-skin="gilded"] .action-btn:disabled { opacity: .45; }

/* Fields sit INTO the surface here rather than on top of it, which is what makes a glass
   panel look like one object instead of a tray of separate parts. */
[data-theme="dark"][data-skin="gilded"] input[type="text"],
[data-theme="dark"][data-skin="gilded"] input[type="number"],
[data-theme="dark"][data-skin="gilded"] input[type="password"],
[data-theme="dark"][data-skin="gilded"] input[type="email"],
[data-theme="dark"][data-skin="gilded"] select,
[data-theme="dark"][data-skin="gilded"] textarea {
    background: var(--bg-input);
    border-color: rgba(255, 255, 255, 0.10);
    color: var(--text-main);
}
[data-theme="dark"][data-skin="gilded"] input:focus,
[data-theme="dark"][data-skin="gilded"] select:focus,
[data-theme="dark"][data-skin="gilded"] textarea:focus {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--border-gold);
    outline: none;
}