/* MeepWars design tokens — this file IS the theme.
   Everything the app paints resolves through a token defined here, so a new
   look means editing this file and nothing else. Rules elsewhere must never
   reach for an Open Props primitive (--blue-5, --gray-0, --radius-3, …)
   directly, and must never hardcode a border-radius, font-family, font-style
   or rule weight.
   The one exception is game identity: seat and map colours are scoped custom
   props at the top of game.css, by the convention in .claude/skills/ui-conventions. */

:root {
    color-scheme: dark;

    /* ------------------------------------------------------------------
       Materials — the substances this world is made of. Swap this block and
       the whole app changes; every token below resolves through it.
       ------------------------------------------------------------------ */
    --mat-soot: #14100b;       /* unlit ground */
    --mat-oak: #241b13;        /* panel */
    --mat-oak-lit: #2c2118;    /* raised panel, nearer the fire */
    --mat-char: #3d2f21;       /* cut edges, rules */
    --mat-char-lit: #51402d;   /* the edge that catches the light */
    --mat-bone: #ecdcbb;       /* primary text, labels on fills */
    --mat-tallow: #c3ad89;     /* secondary text */
    --mat-ash: #9c8869;      /* faintest text; lifted so it still clears 3:1 at the brightest point of --light-hall */
    --mat-brass: #c9963f;      /* accent, brand */
    --mat-brass-lit: #ddb264;
    --mat-brass-dim: #8a6427;
    --mat-ember: #7d2f1c;      /* primary action */
    --mat-ember-lit: #9a412a;
    --mat-ember-dim: #5c2114;
    --mat-oxblood: #9c3b2e;    /* destructive */
    --mat-oxblood-lit: #b84f3f;
    --mat-oxblood-dim: #6b2820;
    --mat-verdigris: #4f8a72;  /* success */
    --mat-verdigris-dim: #2f5546;
    --mat-indigo: #46618f;     /* info, active seat */
    --mat-indigo-dim: #2b3c58;
    --mat-tyrian: #7a4a78;     /* private */

    /* ------------------------------------------------------------------
       Surfaces. Light falls off, it does not step: the gap from the page
       ground to a raised panel is large, the gaps between panel tiers small.
       ------------------------------------------------------------------ */
    --surface-1: var(--mat-soot);
    --surface-2: var(--mat-oak);
    --surface-3: var(--mat-oak-lit);
    --surface-4: var(--mat-char);
    /* Hover and press: a faint lift laid over whatever the control already
       is, so a clear button tints and a filled one brightens a touch. */
    --hover-veil: linear-gradient(
        color-mix(in srgb, var(--mat-bone) 8%, transparent),
        color-mix(in srgb, var(--mat-bone) 8%, transparent)
    );

    /* Light and texture. Applied once, on the page ground — one fire in the
       hall, never repeated per card. */
    --light-hall: radial-gradient(120% 55% at 50% -8%, #4a3418 0%, rgba(74, 52, 24, 0) 60%);
    --light-hall-peak: #4a3418;
    /* The board's own table light, a shade of the same fire. */
    --light-table: radial-gradient(ellipse 70% 55% at 50% 42%,
            color-mix(in srgb, var(--light-hall-peak) 22%, transparent),
            transparent 70%);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    --grain-opacity: 0.05;

    /* The phone sheet's slide, up out of the rail and back into it. Read here
       by static/js/layout.js too, so the wait for the slide to end cannot drift
       from the slide itself. */
    --sheet-slide: 260ms;

    /* Text, from primary down to faintest. */
    --text-1: var(--mat-bone);
    --text-2: var(--mat-tallow);
    --text-3: color-mix(in srgb, var(--mat-tallow) 70%, var(--mat-ash));
    --text-4: var(--mat-ash);
    /* Label sitting on a saturated fill: buttons, badges, avatars, map numerals. */
    --text-on-color: var(--mat-bone);
    /* Label sitting on a light fill. */
    --text-on-light: var(--mat-soot);

    --border-1: var(--mat-char);
    --border-2: var(--mat-char-lit);
    --color-backdrop: rgb(10 7 4 / 0.68);

    /* Accent — brand and primary action. Brass for the brand, ember for
       the action it asks you to take. */
    --color-accent: var(--mat-brass);
    --color-accent-muted: var(--mat-brass-dim);
    --color-accent-text: var(--mat-brass-lit);
    --color-accent-bg: var(--mat-ember);
    --color-accent-bg-hover: var(--mat-ember-lit);
    --color-accent-bg-active: var(--mat-ember-dim);
    --color-accent-subtle: color-mix(in srgb, var(--mat-ember) 32%, var(--mat-oak));
    --color-accent-subtle-text: var(--mat-brass-lit);

    --link: var(--color-accent-text);
    --link-visited: color-mix(in srgb, var(--mat-tyrian) 55%, var(--mat-tallow));

    /* Destructive — leave, kick, delete, decline. */
    --color-destructive: var(--mat-oxblood-lit);
    --color-destructive-hover: color-mix(in srgb, var(--mat-oxblood-lit) 70%, var(--mat-bone));
    --color-destructive-bg: var(--mat-oxblood);
    --color-destructive-bg-hover: var(--mat-oxblood-lit);
    --color-destructive-bg-active: var(--mat-oxblood-dim);
    --color-destructive-subtle: color-mix(in srgb, var(--mat-oxblood) 30%, var(--mat-oak));

    /* Success — copied, in progress, won. */
    --color-success: color-mix(in srgb, var(--mat-verdigris) 75%, var(--mat-bone));
    --color-success-border: var(--mat-verdigris);
    --color-success-bg: var(--mat-verdigris-dim);
    --color-success-subtle: color-mix(in srgb, var(--mat-verdigris) 26%, var(--mat-oak));
    --color-success-subtle-text: color-mix(in srgb, var(--mat-verdigris) 60%, var(--mat-bone));

    /* Attention — it is your move. Brass, and never a fill. */
    --color-attention: var(--mat-brass);
    --color-attention-strong: var(--mat-brass-lit);
    --color-attention-bg: var(--mat-brass-dim);

    /* Highlight — trophies, winner, pending. */
    --color-highlight: var(--mat-brass-lit);
    --color-highlight-subtle: color-mix(in srgb, var(--mat-brass) 22%, var(--mat-oak));
    --color-highlight-subtle-text: color-mix(in srgb, var(--mat-brass-lit) 65%, var(--mat-bone));

    /* Info — the active seat and other secondary-accent chrome. */
    --color-info: color-mix(in srgb, var(--mat-indigo) 70%, var(--mat-bone));
    --color-info-text: color-mix(in srgb, var(--mat-indigo) 55%, var(--mat-bone));
    --color-info-text-hover: color-mix(in srgb, var(--mat-indigo) 30%, var(--mat-bone));
    --color-info-bg: var(--mat-indigo);
    --color-info-bg-hover: color-mix(in srgb, var(--mat-indigo) 78%, var(--mat-bone));
    --color-info-tint: var(--mat-indigo-dim);

    /* Private — chat aimed at one player. */
    --color-private: var(--mat-tyrian);
    --color-private-strong: color-mix(in srgb, var(--mat-tyrian) 68%, var(--mat-bone));

    /* A group's mark in the chat list: one tint each, fixed by its id. Each
       carries --text-on-color. */
    --color-mark-0: var(--mat-indigo);
    --color-mark-1: var(--mat-verdigris-dim);
    --color-mark-2: var(--mat-tyrian);
    --color-mark-3: var(--mat-brass-dim);
    --color-mark-4: color-mix(in srgb, var(--mat-verdigris) 55%, var(--mat-indigo));

    /* Neutral fill — a button that is neither primary nor destructive. */
    --color-neutral-bg: var(--mat-char);
    --color-neutral-bg-hover: var(--mat-char-lit);

    /* ------------------------------------------------------------------
       Type. Two families, two weights. The display face is for the wordmark
       and headings only — it falls apart below --fs-1. Secondary and
       metadata text is italic body, never a lighter grey: that is what makes
       the page read as printed rather than as an interface.
       ------------------------------------------------------------------ */
    --font-display: "Grenze Gotisch", "Iowan Old Style", Georgia, serif;
    --font-body: "Alegreya", Georgia, serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --fw-normal: 400;
    --fw-medium: 500;

    /* Fluid type: clamp(mobile floor, rem + vw growth, desktop cap).
       Bumped one step from the sans scale — a serif reads smaller at the same
       nominal size, and most of this UI lives at 13–15px on a phone. */
    --fs-0: clamp(0.82rem, 0.79rem + 0.2vw, 0.95rem);
    --fs-1: clamp(0.95rem, 0.92rem + 0.4vw, 1.15rem);
    --fs-2: clamp(1.15rem, 1.05rem + 1vw, 1.5rem);
    --fs-3: clamp(1.4rem, 1.2rem + 2vw, 2rem);
    --fs-4: clamp(1.7rem, 1.4rem + 3vw, 2.6rem);

    --fs-hud: clamp(0.62rem, 0.5rem + 0.7vw, 0.95rem);

    --fs-page-title: clamp(1.7rem, 1.3rem + 1vw, 2.3rem);

    /* Board text is in SVG user units, and the board scales to fit its column
       — about 0.48 on a 380px phone, 0.78 once .game-board hits its 620px cap.
       A fixed user-unit size therefore lands smallest on the smallest screen,
       which is exactly backwards. --map-unit inverts that: it grows as the
       viewport shrinks, so a label holds roughly the same size on the glass
       whatever the phone. The multipliers below are that on-screen size in px.
       Derived from the 792-unit viewBox; the clamp pins it once the board
       stops growing (620px) and once it stops shrinking (~320px). */
    --map-unit: clamp(1.277px, 3.362px - 0.336vw, 2.4px);

    /* The numerals are the map's non-colour affordance, so they stay roman and
       a touch heavier than the labels around them. */
    --fs-map-label: calc(var(--map-unit) * 10.5);
    --fs-map-count: calc(var(--map-unit) * 12);
    --fs-map-num: calc(var(--map-unit) * 10.5);
    --fs-map-seq: calc(var(--map-unit) * 7.5);
    --fs-map-badge: calc(var(--map-unit) * 9);
    /* A region's name over its bonus, stamped on the land it belongs to: enough
       over the territory names it sits among to outrank them, not so much that
       a long name stops fitting the region. */
    --fs-map-stamp: calc(var(--map-unit) * 12);

    /* ------------------------------------------------------------------
       Shape. Corners are cut, not rounded. These deliberately shadow the
       Open Props radius scale so a rule that still names --radius-3 lands
       here instead of on a 16px curve.
       ------------------------------------------------------------------ */
    --radius-1: 2px;
    --radius-2: 2px;
    --radius-3: 2px;
    --radius-4: 2px;
    --radius-5: 2px;
    --radius-6: 2px;
    --radius-pill: 2px;
    --radius-round: 2px;
    /* The one thing that stays a circle: an icon button that reads as a token
       on the board, not as a control. */
    --radius-token: 50%;

    --rule-1: 1px solid var(--border-1);
    --rule-strong: 1px solid var(--border-2);
    /* A cut edge plus one lit facet. No drop shadows anywhere in this theme. */
    --bevel: inset 0 1px 0 color-mix(in srgb, var(--mat-char-lit) 70%, transparent);

    /* The smallest a control may be under a finger. Only @media (pointer:
       coarse) rules name it: a mouse is allowed the tighter target. */
    --tap-min: 2.75rem;

    /* Content column tiers. Every non-game page picks one via .page--*;
       pages must not declare their own max-width. */
    --page-w-narrow: 480px;
    --page-w-default: 720px;
    --page-w-wide: 1080px;
    /* The game page before it goes full-bleed; not a content tier. */
    --page-w-game: 900px;

    /* ------------------------------------------------------------------
       Open Props overrides. The primitives below are named directly by rules
       written before this layer existed. Redefining them here means shape,
       weight and elevation land on the theme rather than on an app default,
       and a rule that has not yet been ported still cannot drift.
       ------------------------------------------------------------------ */
    /* Alegreya sets smaller than a system sans at the same nominal size, so
       the whole primitive scale moves up ~8%. One edit here rather than a
       sweep of the ~240 rules that name these directly. */
    --font-size-00: 0.62rem;
    --font-size-0: 0.82rem;
    --font-size-1: 1.06rem;
    --font-size-2: 1.18rem;
    --font-size-3: 1.34rem;
    --font-size-4: 1.6rem;

    --font-sans: var(--font-body);
    --font-serif: var(--font-body);
    --font-weight-1: var(--fw-normal);
    --font-weight-2: var(--fw-normal);
    --font-weight-3: var(--fw-normal);
    --font-weight-4: var(--fw-normal);
    --font-weight-5: var(--fw-medium);
    --font-weight-6: var(--fw-medium);
    --font-weight-7: var(--fw-medium);
    --font-weight-8: var(--fw-medium);
    --font-weight-9: var(--fw-medium);
    /* No drop shadows, no soft glows. Depth is a cut edge and a lit facet. */
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: var(--bevel);
    --shadow-4: var(--bevel);
    --shadow-5: var(--bevel);
    --shadow-6: var(--bevel);
}