/* ==================================================================
   Design tokens — Constellation Visual Brand System v1.0
   "Chrome Cosmic Industrial"

   Ported verbatim from the Constellation visualiser so the two
   products read as one family. Tournament-specific tokens are added
   at the bottom rather than mixed in, so a future sync of the brand
   block stays a straight copy.
   ================================================================== */

:root {
    /* VOID */
    --cs-void:        #050607;
    --cs-space:       #090b0e;
    --cs-obsidian:    #0e1115;
    --cs-carbon:      #14181d;
    --cs-gunmetal:    #1c2229;

    /* CHROME */
    --cs-chrome-white:  #f8fafc;
    --cs-stellar:       #e3e7ec;
    --cs-lunar:         #bbc2cb;
    --cs-titanium:      #858e99;
    --cs-dark-chrome:   #505862;
    --cs-chrome-shadow: #292f36;

    /* LIGHT */
    --cs-star:     #ffffff;
    --cs-ice:      #ddf6ff;
    --cs-cosmic:   #8edcff;
    --cs-electric: #4db8ff;

    /* SEMANTIC */
    --cs-success: #8fe3c0;
    --cs-warning: #e6d89a;
    --cs-error:   #e27d86;

    /* TEXT */
    --cs-text:           #f1f3f5;
    --cs-text-secondary: #a7afb8;
    --cs-text-muted:     #69727c;
    --cs-text-disabled:  #454c54;

    /* RADII */
    --cs-radius-xs: 4px;
    --cs-radius-sm: 6px;
    --cs-radius-md: 8px;
    --cs-radius-lg: 12px;
    --cs-radius-xl: 16px;

    /* SPACING — 4px base grid */
    --cs-1: 4px;  --cs-2: 8px;  --cs-3: 12px; --cs-4: 16px;
    --cs-6: 24px; --cs-8: 32px; --cs-12: 48px; --cs-16: 64px;

    /* MOTION */
    --cs-fast: 100ms;
    --cs-normal: 160ms;
    --cs-slow: 240ms;

    /* MATERIAL */
    --cs-chrome: linear-gradient(180deg,
        #ffffff 0%, #dfe4e9 18%, #8d959f 44%,
        #f6f8fa 62%, #737c86 82%, #d9dee4 100%);
    /* The same metal, caught a little more of the light. */
    --cs-chrome-hi: linear-gradient(180deg,
        #ffffff 0%, #eaeef2 18%, #a2aab4 44%,
        #ffffff 62%, #869099 82%, #e8ecf1 100%);
    /* Translucent so the sky reads behind the instrument. Opaque
       enough that small type stays legible over a star. */
    --cs-panel: linear-gradient(180deg, rgba(19,23,28,.62) 0%, rgba(11,14,18,.76) 100%);
    /* Metallic edge for module borders. Angled so every side catches a
       different part of the ramp, the way the bevel does in the plate art. */
    --cs-chrome-edge: linear-gradient(155deg,
        #f8fafc 0%,
        #aeb6c0 13%,
        #5d656f 27%,
        #ffffff 44%,
        #8d959f 57%,
        #4e565f 72%,
        #dfe4e9 88%,
        #99a1ab 100%);
    /* Dark seat between the chrome and the panel interior. */
    --cs-chrome-seat: inset 0 0 0 1px rgba(0,0,0,.55);
    --cs-control:    linear-gradient(180deg, #252b32, #12161a);
    --cs-control-hi: linear-gradient(180deg, #2b323a, #171c21);
    --cs-control-lo: linear-gradient(180deg, #1e232a, #0e1115);

    /* RUNTIME — chassis tone and accent light */
    --cs-chassis: var(--cs-void);
    --cs-accent:  var(--cs-cosmic);

    --cs-font-ui: 'Segoe UI Variable Text', 'Segoe UI', system-ui,
                  -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --cs-font-mono: 'Cascadia Mono', Consolas, ui-monospace,
                    'SF Mono', Menlo, monospace;

    /* ------------------------------------------------------------------
       TOURNAMENT — roles layered on the brand palette above.
       ------------------------------------------------------------------ */

    /* A seated player is chrome-on-void like every other control. The
       cosmic light is reserved for state, so an ordinary card must not
       already be glowing — otherwise "pinned" has nothing left to say. */
    --tm-card:        linear-gradient(180deg, #2a323b, #151a20);
    --tm-card-hi:     linear-gradient(180deg, #333c46, #1a2027);
    --tm-card-edge:   #3d454f;

    /* Pinned winner: the one place chrome goes bright. */
    --tm-pinned-glow: rgba(142, 220, 255, .34);

    /* Champion reads warm against an interface that is otherwise
       entirely cool — the only warm light on the board. */
    --tm-champion:      var(--cs-warning);
    --tm-champion-glow: rgba(230, 216, 154, .30);

    --tm-danger: var(--cs-error);

    /* Bracket geometry, shared between the CSS and the connector maths. */
    --tm-slot-w: 168px;
    --tm-slot-h: 40px;
    --tm-round-gap: 56px;
}