/*
 * Torch design tokens — single source of truth for colour, spacing, radii, typography and
 * motion across the Blazor web app. This is a hand-authored v1; the plan calls for a generator
 * that also emits Unity USS/C# constants from a shared tokens.json (see
 * Docs/08-design-system.md) — that generator has not been
 * built yet, so treat the values below as the values to carry over once it exists.
 *
 * Direction: modern luxury, clean, mature — evoking Lineage 2 / Age of Empires / Warcraft-era
 * nostalgia without imitating any of their UIs. Dark obsidian surfaces (not muddy brown), one
 * warm ember-gold accent used sparingly, restrained radii.
 *
 * Two rules earned through review rounds, worth keeping:
 *  - Surfaces are warm-*neutral*, not warm. An earlier pass retinted them clearly warm and read
 *    as brown against the cooler hero photograph; the values below are the midpoint between
 *    that and the original cool charcoal (red only a couple of points over blue).
 *  - Texture is a panel treatment, never a page or chrome background. The geometric pattern
 *    belongs to accent sections (.torch-textured); the header, the footer and the admin app bar
 *    are flat surfaces with a hairline. Tiled everywhere it reads as wallpaper, not material.
 */

:root {
    /* Surfaces — layered obsidian, from deepest to closest to the viewer. */
    --torch-surface-0: #0c0c0d;
    --torch-surface-1: #161514;
    --torch-surface-2: #1e1c1a;
    --torch-surface-3: #282623;

    /* Text. Muted is held at 4.5:1 (WCAG AA) against every surface it is actually drawn on —
       surface-2 is the lightest of those (torch-input, TorchCard, the header). This value is
       also named in torch-client's TorchTokens.uss; a change here needs a matching edit there. */
    --torch-text-primary: #f2ead9;
    --torch-text-secondary: #b9b2a4;
    --torch-text-muted: #8c8577;

    /* The one accent. Used sparingly: primary actions, focus, active state, ornament. */
    --torch-accent: #c9973f;
    --torch-accent-strong: #e0b463;
    --torch-accent-muted: #8a6b34;

    /* Semantic */
    --torch-danger: #b0473f;
    --torch-success: #4f7a5c;

    /* Target categories: what a ring under a body says about it. Enemy is the danger colour, an
       NPC is the accent, a friendly is the party green torch-client draws its party marks in.
       Named in torch-client's TorchTokens.uss; a change here needs a matching edit there. */
    --torch-target-enemy: #b0473f;
    --torch-target-friendly: #94c592;
    --torch-target-npc: #e0b463;

    /*
     * The sky ramp — one hue for the whole world clock, sampled once per reading.
     *
     * Four stops and no more, because the world-time instrument shows exactly one colour at a
     * time: deep indigo at midnight, violet across both horizon crossings, the accent at mid
     * morning and its bright twin at noon. The warm half is the accent rather than a second
     * palette, so the dial never introduces a colour the product does not already own.
     *
     * The mixing happens in the browser (color-mix), not in C#. That is deliberate: sampling a
     * ramp in code would mean holding these values as literals somewhere under Web/, which is the
     * one thing this file exists to prevent.
     */
    --torch-sky-midnight: #14183a;
    --torch-sky-twilight: #4a3d6b;
    --torch-sky-day: var(--torch-accent);
    --torch-sky-noon: var(--torch-accent-strong);

    /* Borders — hairline warm metallic, never heavy */
    --torch-border: #34302a;
    --torch-border-strong: #4b4131;

    /* Spacing — 8pt scale */
    --torch-space-1: 0.25rem;
    --torch-space-2: 0.5rem;
    --torch-space-3: 0.75rem;
    --torch-space-4: 1rem;
    --torch-space-6: 1.5rem;
    --torch-space-8: 2rem;
    --torch-space-12: 3rem;
    --torch-space-16: 4rem;
    --torch-space-24: 6rem;

    /* Radii — restrained; never pill */
    --torch-radius-sm: 4px;
    --torch-radius-md: 6px;
    --torch-radius-lg: 8px;

    /*
     * The forged plate — the primary action's material, in one place.
     *
     * These live here rather than inline in components.css because there are two renderers of a
     * primary action in this product: the design system's own .torch-button--primary, and
     * MudBlazor's .mud-button-filled under /admin, which cannot share a class. Two hand-copied
     * sets of gradients is exactly how the admin console drifts into looking like a different
     * product — which is the one thing the "MudBlazor only under /admin" boundary exists to stop.
     *
     * Read the long note above .torch-button--primary in components.css before changing any of
     * these values; it records the four specific mistakes this composition is a correction for.
     */
    --torch-plate-face:
        radial-gradient(125% 165% at 50% 122%, rgba(203, 120, 38, 0.34) 0%, rgba(203, 120, 38, 0) 62%),
        linear-gradient(180deg, #2c2824 0%, #1d1a17 55%, #121110 100%);
    --torch-plate-face-hot:
        radial-gradient(125% 165% at 50% 122%, rgba(212, 129, 43, 0.5) 0%, rgba(212, 129, 43, 0) 66%),
        linear-gradient(180deg, #332e28 0%, #221e1a 55%, #151312 100%);
    --torch-plate-rim: #6a5228;
    --torch-plate-rim-hot: #a67e39;
    --torch-plate-label: #edd39a;
    --torch-plate-label-hot: #f8e6bb;
    --torch-plate-shadow:
        inset 0 1px 0 rgba(255, 221, 163, 0.14),
        inset 0 0 24px rgba(190, 110, 40, 0.13),
        0 1px 0 rgba(0, 0, 0, 0.6),
        0 4px 16px rgba(4, 3, 1, 0.7);
    --torch-plate-shadow-hot:
        inset 0 1px 0 rgba(255, 230, 180, 0.2),
        inset 0 0 30px rgba(206, 124, 42, 0.2),
        0 1px 0 rgba(0, 0, 0, 0.6),
        0 6px 22px rgba(4, 3, 1, 0.72),
        0 0 26px rgba(198, 124, 42, 0.26);

    /*
     * Material — how a surface gets its definition.
     *
     * Not from lit gradients. A two-stop light-to-dark ramp plus a white inset specular is the
     * canonical glossy-button cliche, and it names a light source that exists nowhere in this
     * product: the only warm light here is torch fire, and it is dim and orange. That treatment
     * was removed from the primary button first (see the long note in components.css) and these
     * tokens carry the same correction to every other surface — cards, badges, alerts.
     *
     * What replaces it is line-work, matching the worked-stonework lattice the accent panels
     * carry: a groove chiselled just inside the outer edge, and where a piece is "finished", a
     * hairline frame set in from the rim the way a struck plate carries a border a few
     * millimetres in from its edge.
     *
     * The groove is dark on purpose. A groove is a shadow, not a highlight — cutting into stone
     * does not make it brighter, and this is the single substitution that stops a panel reading
     * as moulded plastic.
     */
    --torch-chisel: inset 0 0 0 1px rgba(0, 0, 0, 0.42);
    --torch-engraving: rgba(201, 151, 63, 0.07);
    --torch-engraving-lit: rgba(201, 151, 63, 0.17);

    /*
     * The iron ramp — the material a CONTROL is made of, and the edge of one.
     *
     * Measured off the founder's delivered HUD chrome (HUD2/HUD-empty.png, HUD2/avatar-frame.png)
     * as the median of an opaque region, region cited per value in the stage handover. This is the
     * register neither system had: --torch-surface-* is a ground, --torch-plate-* is a panel, and
     * a switch, a scrollbar thumb, a segment and a list row are none of those. Without it a
     * control is drawn as a flat surface value inside a uniform hairline, which is a div.
     *
     * THE RAMP IS MONOTONIC IN LUMINANCE — 28.7, 34.8, 63.4, 87.6, 204.9 — and that ordering is
     * the whole utility. A machined edge is three of these in the right places: lit on the top
     * border, deep on the bottom, face between. Two values crossing over inverts every bevel that
     * spends them and stays perfectly on-palette doing it, so the client's harness pins the order.
     *
     * WARM-NEUTRAL, NOT GOLD, and this is the easiest thing to get wrong. Gold is LIGHT ON THE
     * IRON — a rim, a gem, a lit capital — never the body of anything. Baking gold into a panel is
     * how an interface goes brassy. The world's own style bible states the same rule for stone and
     * bark: warmth painted into an albedo cannot be aimed or dimmed, so the material stays neutral
     * and the warm reading comes from the key light.
     *
     * AND THE LIMIT: this ramp is EDGES AND SMALL CONTROLS, never a large fill. --torch-iron-face
     * reads as worked metal inside a 24px switch and as a mud wash across a 580px row; the
     * difference is area, not colour. A big surface stays on --torch-surface-* or the plate, and
     * the iron appears in its four borders.
     */
    --torch-iron-recess: #261b12;
    --torch-iron-face: #2c2119;
    --torch-iron-band: #483e34;
    --torch-iron-lit: #685739;

    /* The polished catch. One pixel wide, on a top edge, and nowhere else — it is the brightest
       value in this file that is not a gem, and spending it as a fill undoes the whole restraint
       the accent budget is built on. */
    --torch-iron-specular: #d4ccc0;

    /* Elevation. Shadows carry a faint warm tint rather than pure black, so a raised surface
       reads as lit by the same ember source as the accent. */
    --torch-shadow-sm: 0 1px 2px rgba(8, 5, 2, 0.45);
    --torch-shadow-md: 0 4px 12px rgba(8, 5, 2, 0.5), 0 1px 2px rgba(8, 5, 2, 0.55);
    --torch-shadow-lg: 0 12px 32px rgba(8, 5, 2, 0.55), 0 2px 6px rgba(8, 5, 2, 0.45);
    --torch-shadow-glow: 0 0 0 1px rgba(201, 151, 63, 0.25), 0 4px 20px rgba(201, 151, 63, 0.15);

    /* A single focus treatment for the whole product — an ember ring, never the UA outline. */
    --torch-focus-ring: 0 0 0 2px var(--torch-surface-0), 0 0 0 4px var(--torch-accent);

    /* Typography */
    --torch-font-display: "Cinzel", "Georgia", serif;
    --torch-font-body: "Inter", system-ui, sans-serif;
    --torch-font-mono: "JetBrains Mono", ui-monospace, monospace;

    /* Type scale — a 1.25 ratio, rounded to sensible rem values. Display sizes fluid so a hero
       heading does not have to be re-tuned per breakpoint. */
    --torch-text-xs: 0.75rem;
    --torch-text-sm: 0.8125rem;
    --torch-text-base: 0.9375rem;
    --torch-text-md: 1.0625rem;
    --torch-text-lg: 1.25rem;
    --torch-text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
    --torch-text-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);

    /* Display type is set tight and slightly tracked out; body type is not. */
    --torch-tracking-display: 0.02em;
    --torch-tracking-eyebrow: 0.22em;
    --torch-leading-display: 1.15;
    --torch-leading-body: 1.6;

    /* Layout */
    --torch-content-width: 72rem;
    --torch-prose-width: 44rem;

    /* Motion — slow and weighty */
    --torch-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --torch-duration-fast: 150ms;
    --torch-duration-normal: 350ms;
    --torch-duration-slow: 450ms;
}