/*
  tokens.css — the design system, taken 1:1 from Pelton
  (github.com/TRC-Loop/Pelton, frontend/src/theme/tokens.css). Single source of
  truth for every color, space, radius, font and size. A theme is one of these
  named token sets; components reference these variables and never literal
  values.

  accent handling:
    --accent is injected at runtime from the instance/user chosen hex
    (default #465AF2). --accent-fg (black or white) is computed from luminance
    so text on an accent surface stays legible. --selection-bg and --link derive
    from --accent with color-mix so we only ever store one color.
*/

:root {
  /* fonts. bundled locally via @fontsource, no runtime cdn. */
  --font-ui: "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;

  /* type sizes. message list 13px, body 13-14, labels/meta 11-12. */
  --fz-meta: 11px;
  --fz-label: 12px;
  --fz-list: 13px;
  --fz-body: 14px;
  --fz-heading: 16px;
  --fz-title: 20px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* fixed spacing scale. density only swaps the row/pane tokens further down. */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;

  /* radii. Sharp by default for the tactical UI; the "round" corner option
     still softens them. 0 keeps the game-panel / HUD look. */
  --radius-control: 0;
  --radius-card: 0;
  --radius-none: 0;

  /* borders are hairlines throughout. */
  --hairline: 0.5px;

  /* accent. --accent and --accent-fg are overwritten at runtime from the
     admin/user choice; the derivations below track whatever accent is set.
     Default is a tactical amber to suit the shooter-HUD aesthetic. */
  --accent: #e7a325;
  --accent-fg: #101012;
  --selection-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  --selection-bg-strong: color-mix(in srgb, var(--accent) 22%, transparent);
  --link: var(--accent);

  /* elevation, used sparingly for overlays and popovers. */
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.18);

  /* default density (medium) row + pane spacing. overridden per density below. */
  --row-pad-y: 8px;
  --row-pad-x: 12px;
  --row-gap: 3px;
  --list-line-height: 1.4;
  --pane-pad: 16px;
  --control-height: 30px;
  --stack-gap: 10px;
}

/* light theme (default). */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --surface-base: #f6f6f7;
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --surface-sunken: #efeff1;
  --surface-hover: #ececef;

  --text-primary: #1a1b1e;
  --text-secondary: #4a4d54;
  --text-tertiary: #797d86;
  --text-inverse: #ffffff;

  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.22);

  --success: #1a7f4b;
  --success-bg: color-mix(in srgb, #1a7f4b 12%, transparent);
  --warning: #9a6700;
  --warning-bg: color-mix(in srgb, #9a6700 14%, transparent);
  --danger: #c0392b;
  --danger-bg: color-mix(in srgb, #c0392b 12%, transparent);

  /* tactical UI tokens (light fallback) */
  --tac-dot: rgba(40, 50, 66, 0.42);
  --tac-dot-accent: color-mix(in srgb, var(--accent) 85%, transparent);
  --btn-bg: #e9eaec;
  --btn-bg-hover: #dfe1e4;
  --btn-fg-idle: #5a5f67;
  --stroke-hover: #1a1b1e;
  --panel-fill: #ffffff;
}

/* dark theme. every token has a dark value so the toggle never leaves a gap.
   Tactical/HUD palette: near-black gunmetal surfaces, cool desaturated grays. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-base: #0c0d0f;
  --surface-raised: #141619;
  --surface-overlay: #16181c;
  --surface-sunken: #0f1012;
  --surface-hover: #1d2025;

  --text-primary: #eef0f2;
  --text-secondary: #a9afb8;
  --text-tertiary: #6b7078;
  --text-inverse: #ffffff;

  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-default: rgba(255, 255, 255, 0.11);
  --border-strong: rgba(255, 255, 255, 0.20);

  /* tactical UI tokens: dotted button texture, idle/hover button fills, the
     white hover stroke, and the panel fill used during the line-open animation.
     The dots are meant to read clearly *inside buttons only* (not the page bg
     or popovers). */
  --tac-dot: rgba(203, 213, 227, 0.42);
  --tac-dot-accent: color-mix(in srgb, var(--accent) 78%, transparent);
  --btn-bg: #16181c;
  --btn-bg-hover: #1f232a;
  --btn-fg-idle: #7f868f;
  --stroke-hover: #ffffff;
  --panel-fill: #14161a;

  /* lighten the link derivation so the accent reads on dark surfaces. */
  --link: color-mix(in srgb, var(--accent) 72%, white);
  --selection-bg: color-mix(in srgb, var(--accent) 22%, transparent);
  --selection-bg-strong: color-mix(in srgb, var(--accent) 32%, transparent);

  --success: #3fb27a;
  --success-bg: color-mix(in srgb, #3fb27a 16%, transparent);
  --warning: #d9a441;
  --warning-bg: color-mix(in srgb, #d9a441 16%, transparent);
  --danger: #e5675a;
  --danger-bg: color-mix(in srgb, #e5675a 16%, transparent);

  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* density variants. these swap only spacing and line-height tokens, so every
   component stays density-agnostic. medium is the default already on :root. */
:root[data-density="compact"] {
  --row-pad-y: 5px;
  --row-pad-x: 10px;
  --row-gap: 2px;
  --list-line-height: 1.3;
  --pane-pad: 12px;
  --control-height: 27px;
  --stack-gap: 8px;
}

:root[data-density="medium"] {
  --row-pad-y: 8px;
  --row-pad-x: 12px;
  --row-gap: 3px;
  --list-line-height: 1.4;
  --pane-pad: 16px;
  --control-height: 30px;
  --stack-gap: 10px;
}

:root[data-density="luxe"] {
  --row-pad-y: 13px;
  --row-pad-x: 16px;
  --row-gap: 5px;
  --list-line-height: 1.55;
  --pane-pad: 22px;
  --control-height: 34px;
  --stack-gap: 14px;
}

/* corner style variants. these swap only the radius tokens, so every
   component stays corner-agnostic. the default 5px values live on :root. */
:root[data-corners="square"] {
  --radius-control: 0;
  --radius-card: 0;
}

:root[data-corners="round"] {
  --radius-control: 10px;
  --radius-card: 12px;
}