@layer commander.tokens, commander.primitives;

@layer commander.tokens {
  :root {
    /* Obsidian & ember (2026-09-02 refresh). One cool blue-black material,
       one warm ember accent, mist text. Every stylesheet reads these tokens;
       no colour is hard-coded elsewhere. */
    --ds-table: #07090c;
    --ds-panel: #0c1015;
    --ds-panel-raised: #12181f;
    --ds-dialog: #0f1419;
    --ds-table-rgb: 7, 9, 12;
    --ds-panel-rgb: 12, 16, 21;
    --ds-panel-raised-rgb: 18, 24, 31;
    --ds-line: #2a3440;
    --ds-line-soft: #1a222b;
    --ds-text: #f3f1ec;
    --ds-copy: #c2c9d0;
    --ds-muted: #8a96a3;
    --ds-accent: #e07a4a;
    --ds-accent-bright: #ffa878;
    --ds-accent-soft: #c99a86;
    --ds-accent-ink: #1c0c05;
    --ds-accent-ink-rgb: 28, 12, 5;
    --ds-accent-glow: #ffd9c4;
    --ds-accent-rgb: 224, 122, 74;
    --ds-accent-bright-rgb: 255, 168, 120;
    --ds-accent-soft-rgb: 201, 154, 134;
    /* Legacy names kept for older rules and inline styles. */
    --ds-brass: var(--ds-accent);
    --ds-brass-bright: var(--ds-accent-bright);
    --ds-good: #7fcaa4;
    --ds-danger: #ef8b7b;
    --ds-focus: #ffb58c;
    --ds-font-display: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
    --ds-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ds-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ds-r-sm: 8px;
    --ds-r-md: 12px;
    --ds-r-lg: 18px;
    --ds-touch: 44px;
    --ds-shadow-dialog: 0 36px 110px rgba(2, 6, 12, .78), 0 0 0 1px rgba(255, 255, 255, .04);

    /* Motion: one easing family and three durations for the whole client. */
    --ds-ease: cubic-bezier(.22, .61, .36, 1);
    --ds-ease-spring: cubic-bezier(.34, 1.36, .64, 1);
    --ds-t-fast: 140ms;
    --ds-t-base: 220ms;
    --ds-t-slow: 360ms;

    /* Interface scale. The client is drawn in a fixed pixel grid that was
       sized for ~1440px desktops; wider screens zoom the whole document so
       type and cards keep their proportions instead of shrinking into the
       corners. Viewport-relative lengths inside a zoomed document are
       multiplied by the zoom, so every vh/vw in the stylesheets goes through
       these compensated units. */
    --ui-zoom: 1;
    --vhu: calc(1vh / var(--ui-zoom));
    --dvhu: calc(1dvh / var(--ui-zoom));
    --svhu: calc(1svh / var(--ui-zoom));
    --vwu: calc(1vw / var(--ui-zoom));
  }

  @media (min-width: 1600px) and (min-height: 820px) { :root { --ui-zoom: 1.15; } }
  @media (min-width: 1800px) and (min-height: 900px) { :root { --ui-zoom: 1.3; } }
  @media (min-width: 2100px) and (min-height: 1000px) { :root { --ui-zoom: 1.4; } }
  @media (min-width: 2500px) and (min-height: 1200px) { :root { --ui-zoom: 1.55; } }
  @media (min-width: 3200px) and (min-height: 1500px) { :root { --ui-zoom: 1.9; } }

  /* The arena is a fixed-height grid (top bar, three battlefield rows, prompt,
     hand), so in a game the zoom is capped by the viewport height as well: a
     1920×1080 desktop keeps 1.15 instead of squeezing the battlefields at 1.3.
     Menus and setup scroll, so they keep the width-based value above. */
  body.game-active { --ui-zoom: 1; }
  @media (min-width: 1600px) and (min-height: 900px) { body.game-active { --ui-zoom: 1.15; } }
  @media (min-width: 1800px) and (min-height: 1000px) { body.game-active { --ui-zoom: 1.3; } }
  @media (min-width: 2100px) and (min-height: 1100px) { body.game-active { --ui-zoom: 1.4; } }
  @media (min-width: 2500px) and (min-height: 1250px) { body.game-active { --ui-zoom: 1.55; } }
  @media (min-width: 3200px) and (min-height: 1550px) { body.game-active { --ui-zoom: 1.9; } }
  /* Compensated units resolve against the zoom of the element that declares
     them, so body declares them again to follow the arena override. */
  body {
    --vhu: calc(1vh / var(--ui-zoom));
    --dvhu: calc(1dvh / var(--ui-zoom));
    --svhu: calc(1svh / var(--ui-zoom));
    --vwu: calc(1vw / var(--ui-zoom));
  }
}

@layer commander.primitives {
  :where(button, a, input, select, summary, [role="button"]):focus-visible {
    outline: 2px solid var(--ds-focus);
    outline-offset: 2px;
  }

  .ui-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ds-copy);
  }

  .ui-status > .gameicon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--ds-brass);
  }
}