/* ==========================================================================
   Last Stronghold — design tokens
   Three layers:
     1. Primitives  (--p-*)  raw palette, scale steps; never used directly by
                             components.
     2. Semantic    (--color-*, --space-*, --font-*, ...) meaning-bearing
                             aliases of primitives; the theme redefines these.
     3. Component   (--button-*, --hud-*, --panel-*, ...) per-part hooks that
                             app.css reads.
   The identity is a dark "midnight slate" military-arcade look by default
   (the page declares color-scheme: dark). Team A is teal, team B is ember.
   All text tokens are checked to ≥ 4.5:1 against their paired surface.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- 1. Primitives: colour ---------- */
  /* Midnight slate surfaces */
  --p-slate-950: #080b12;
  --p-slate-900: #0e131c;
  --p-slate-850: #141b27;
  --p-slate-800: #1b2433;
  --p-slate-700: #263142;
  --p-slate-600: #34425a;
  --p-slate-500: #4a5a75;
  --p-slate-400: #6c7d99;

  /* Warm ivory text */
  --p-ivory-100: #f7f1e3;
  --p-ivory-200: #e8e0cf;
  --p-ivory-400: #c6bda9;
  --p-ivory-600: #a29a89;

  /* Aged brass highlights */
  --p-brass-200: #f3dfa2;
  --p-brass-300: #e2c27a;
  --p-brass-400: #c9a45a;
  --p-brass-500: #a98637;
  --p-brass-700: #6e561f;
  --p-brass-900: #3a2c0c;

  /* Team A — teal */
  --p-teal-200: #a5ece6;
  --p-teal-300: #63d6cd;
  --p-teal-400: #2eb8ad;
  --p-teal-600: #1b7d76;
  --p-teal-900: #0b3634;

  /* Team B — ember */
  --p-ember-200: #ffcfb0;
  --p-ember-300: #ffa070;
  --p-ember-400: #f2703a;
  --p-ember-600: #b34a1e;
  --p-ember-900: #4a1d0a;

  /* Status */
  --p-green-300: #8ee29d;
  --p-green-500: #3ea55a;
  --p-green-900: #0f3a1c;
  --p-red-300: #ff9c9c;
  --p-red-500: #d9453f;
  --p-red-900: #4a1212;
  --p-amber-300: #ffd27a;
  --p-amber-500: #d9a02b;
  --p-amber-900: #4a3508;
  --p-blue-300: #9cc4ff;
  --p-blue-500: #3d7fd9;
  --p-blue-900: #0f2748;

  --p-white: #ffffff;
  --p-black: #000000;

  /* ---------- 1. Primitives: scale ---------- */
  --p-space-1: 0.25rem;
  --p-space-2: 0.5rem;
  --p-space-3: 0.75rem;
  --p-space-4: 1rem;
  --p-space-5: 1.5rem;
  --p-space-6: 2rem;
  --p-space-7: 3rem;
  --p-space-8: 4rem;

  --p-radius-1: 0.25rem;
  --p-radius-2: 0.5rem;
  --p-radius-3: 0.75rem;
  --p-radius-4: 1rem;
  --p-radius-pill: 999px;

  --p-font-size-xs: 0.75rem;
  --p-font-size-sm: 0.875rem;
  --p-font-size-md: 1rem;
  --p-font-size-lg: 1.125rem;
  --p-font-size-xl: 1.375rem;
  --p-font-size-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --p-font-size-3xl: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);

  --p-duration-fast: 150ms;
  --p-duration-base: 220ms;
  --p-duration-slow: 300ms;
  --p-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---------- 2. Semantic: colour ---------- */
  --color-bg: var(--p-slate-950);
  --color-bg-gradient-top: var(--p-slate-900);
  --color-surface: var(--p-slate-900);
  --color-surface-raised: var(--p-slate-850);
  --color-surface-overlay: var(--p-slate-800);
  --color-surface-sunken: var(--p-slate-950);
  --color-surface-metal: linear-gradient(180deg, var(--p-slate-800), var(--p-slate-850) 60%, var(--p-slate-900));

  --color-text: var(--p-ivory-100);           /* ~15:1 on slate-900 */
  --color-text-muted: var(--p-ivory-400);     /* ~9:1 on slate-900 */
  --color-text-subtle: var(--p-ivory-600);    /* ~5.6:1 on slate-900 */
  --color-text-inverse: var(--p-slate-950);

  --color-border: var(--p-slate-700);
  --color-border-strong: var(--p-slate-500);
  --color-border-brass: var(--p-brass-700);

  --color-accent: var(--p-brass-300);          /* 10:1 on slate-900 */
  --color-accent-strong: var(--p-brass-200);
  --color-accent-deep: var(--p-brass-500);
  --color-accent-muted: var(--p-brass-900);
  --color-on-accent: var(--p-slate-950);       /* 12:1 on brass-300 */

  --color-link: var(--p-brass-200);
  --color-link-hover: var(--p-white);

  --color-focus: var(--p-teal-300);
  --color-selection-bg: var(--p-brass-700);
  --color-selection-text: var(--p-ivory-100);

  /* Teams */
  --color-team-a: var(--p-teal-300);           /* 9.5:1 on slate-900 */
  --color-team-a-strong: var(--p-teal-400);
  --color-team-a-soft: var(--p-teal-900);
  --color-on-team-a: var(--p-slate-950);
  --color-team-b: var(--p-ember-300);          /* 8.4:1 on slate-900 */
  --color-team-b-strong: var(--p-ember-400);
  --color-team-b-soft: var(--p-ember-900);
  --color-on-team-b: var(--p-slate-950);

  /* Status */
  --color-success: var(--p-green-300);
  --color-success-bg: var(--p-green-900);
  --color-success-border: var(--p-green-500);
  --color-danger: var(--p-red-300);
  --color-danger-bg: var(--p-red-900);
  --color-danger-border: var(--p-red-500);
  --color-warning: var(--p-amber-300);
  --color-warning-bg: var(--p-amber-900);
  --color-warning-border: var(--p-amber-500);
  --color-info: var(--p-blue-300);
  --color-info-bg: var(--p-blue-900);
  --color-info-border: var(--p-blue-500);

  --color-disabled-bg: var(--p-slate-800);
  --color-disabled-text: var(--p-slate-400);
  --color-disabled-border: var(--p-slate-700);

  --color-backdrop: rgb(4 6 10 / 0.72);

  /* ---------- 2. Semantic: typography (system stack, no web fonts) ---------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-display: var(--font-sans);

  --font-size-xs: var(--p-font-size-xs);
  --font-size-sm: var(--p-font-size-sm);
  --font-size-md: var(--p-font-size-md);
  --font-size-lg: var(--p-font-size-lg);
  --font-size-xl: var(--p-font-size-xl);
  --font-size-2xl: var(--p-font-size-2xl);
  --font-size-3xl: var(--p-font-size-3xl);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  --line-height-tight: 1.15;
  --line-height-base: 1.5;
  --letter-spacing-caps: 0.08em;
  --letter-spacing-display: 0.02em;

  /* ---------- 2. Semantic: spacing / sizing ---------- */
  --space-1: var(--p-space-1);
  --space-2: var(--p-space-2);
  --space-3: var(--p-space-3);
  --space-4: var(--p-space-4);
  --space-5: var(--p-space-5);
  --space-6: var(--p-space-6);
  --space-7: var(--p-space-7);
  --space-8: var(--p-space-8);

  --size-tap-target: 2.75rem;     /* 44px minimum actionable control */
  --size-content-max: 80rem;
  --size-prose-max: 65ch;
  --size-form-max: 28rem;
  --size-battlefield: 52rem;      /* 832px canvas at 1x */

  /* ---------- 2. Semantic: borders / radii ---------- */
  --border-width: 1px;
  --border-width-strong: 2px;
  --radius-sm: var(--p-radius-1);
  --radius-md: var(--p-radius-2);
  --radius-lg: var(--p-radius-3);
  --radius-xl: var(--p-radius-4);
  --radius-pill: var(--p-radius-pill);

  /* ---------- 2. Semantic: shadows (dark theme: soft depth + inner edge) ---------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 0.45), 0 1px 0 rgb(255 255 255 / 0.04) inset;
  --shadow-lg: 0 18px 44px rgb(0 0 0 / 0.55), 0 1px 0 rgb(255 255 255 / 0.05) inset;
  --shadow-glow-brass: 0 0 0 1px var(--p-brass-700), 0 0 18px rgb(226 194 122 / 0.28);
  --shadow-glow-team-a: 0 0 14px rgb(99 214 205 / 0.45);
  --shadow-glow-team-b: 0 0 14px rgb(255 160 112 / 0.45);

  /* ---------- 2. Semantic: focus ---------- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--color-focus);

  /* ---------- 2. Semantic: motion ---------- */
  --duration-fast: var(--p-duration-fast);
  --duration-base: var(--p-duration-base);
  --duration-slow: var(--p-duration-slow);
  --ease-standard: var(--p-ease);

  /* ---------- 2. Semantic: z-index scale ---------- */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* ---------- 2. Semantic: breakpoints (documented; used literally in @media) ----------
     --bp-sm: 40rem   (640px)
     --bp-md: 48rem   (768px)
     --bp-lg: 64rem   (1024px)
     --bp-xl: 80rem   (1280px) */

  /* ---------- 3. Component: panels & cards ---------- */
  --panel-bg: var(--color-surface-metal);
  --panel-border: var(--border-width) solid var(--color-border);
  --panel-radius: var(--radius-xl);
  --panel-shadow: var(--shadow-lg);
  --panel-padding: var(--space-5);

  --card-bg: var(--color-surface-raised);
  --card-border: var(--border-width) solid var(--color-border);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
  --card-padding: var(--space-4);

  /* ---------- 3. Component: buttons ---------- */
  --button-min-height: var(--size-tap-target);
  --button-radius: var(--radius-md);
  --button-padding-inline: var(--space-4);
  --button-font-weight: var(--font-weight-bold);

  --button-primary-bg: linear-gradient(180deg, var(--p-brass-200), var(--p-brass-400));
  --button-primary-text: var(--color-on-accent);
  --button-primary-border: var(--p-brass-500);
  --button-primary-shadow: var(--shadow-glow-brass);

  --button-secondary-bg: var(--color-surface-overlay);
  --button-secondary-text: var(--color-text);
  --button-secondary-border: var(--color-border-strong);

  --button-danger-bg: var(--color-danger-bg);
  --button-danger-text: var(--color-danger);
  --button-danger-border: var(--color-danger-border);

  --button-disabled-bg: var(--color-disabled-bg);
  --button-disabled-text: var(--color-disabled-text);
  --button-disabled-border: var(--color-disabled-border);

  /* ---------- 3. Component: forms ---------- */
  --input-bg: var(--color-surface-sunken);
  --input-text: var(--color-text);
  --input-placeholder: var(--color-text-subtle);
  --input-border: var(--color-border-strong);
  --input-border-focus: var(--color-focus);
  --input-radius: var(--radius-md);
  --input-min-height: var(--size-tap-target);
  --input-padding-inline: var(--space-3);

  /* ---------- 3. Component: navigation ---------- */
  --nav-bg: rgb(14 19 28 / 0.92);
  --nav-link-text: var(--color-text-muted);
  --nav-link-text-active: var(--color-accent);
  --nav-link-underline: var(--color-accent);
  --nav-min-height: var(--size-tap-target);

  /* ---------- 3. Component: badges ---------- */
  --badge-radius: var(--radius-pill);
  --badge-padding: var(--space-1) var(--space-2);
  --badge-font-size: var(--font-size-xs);
  --badge-locked-bg: var(--color-warning-bg);
  --badge-locked-text: var(--color-warning);
  --badge-locked-border: var(--color-warning-border);
  --badge-team-a-bg: var(--color-team-a-soft);
  --badge-team-a-text: var(--color-team-a);
  --badge-team-b-bg: var(--color-team-b-soft);
  --badge-team-b-text: var(--color-team-b);

  /* ---------- 3. Component: HUD & battlefield ---------- */
  --hud-bg: var(--color-surface-sunken);
  --hud-border: var(--border-width) solid var(--color-border-brass);
  --hud-radius: var(--radius-lg);
  --hud-label: var(--color-text-muted);
  --hud-value: var(--color-accent-strong);
  --hud-value-font: var(--font-mono);
  --hud-value-size: var(--font-size-xl);
  --hud-lives: var(--color-success);
  --hud-lives-low: var(--color-danger);
  --hud-star: var(--p-brass-200);
  --hud-base-ok: var(--color-success);
  --hud-base-destroyed: var(--color-danger);
  --hud-team-a: var(--color-team-a);
  --hud-team-b: var(--color-team-b);

  --battlefield-bg: var(--p-black);
  --battlefield-frame: var(--p-slate-600);
  --battlefield-frame-glow: var(--shadow-glow-brass);
  --battlefield-radius: var(--radius-sm);

  --powerup-bg: var(--color-surface-overlay);
  --powerup-bg-ready: var(--color-accent-muted);
  --powerup-border-ready: var(--color-accent-deep);
  --powerup-text: var(--color-text);
  --powerup-key-bg: var(--p-slate-950);
  --powerup-key-text: var(--color-accent);
  --powerup-count-text: var(--color-accent-strong);

  /* ---------- 3. Component: store / leaderboard / status ---------- */
  --price-text: var(--color-accent-strong);
  --price-size: var(--font-size-2xl);
  --table-header-bg: var(--color-surface-overlay);
  --table-row-alt-bg: rgb(255 255 255 / 0.025);
  --table-border: var(--color-border);
  --rank-gold: var(--p-brass-200);
  --rank-silver: var(--p-ivory-400);
  --rank-bronze: var(--p-ember-300);

  --status-bg: var(--color-info-bg);
  --status-text: var(--color-info);
  --status-border: var(--color-info-border);
  --status-radius: var(--radius-md);
}

/* Motion tokens collapse for users who prefer reduced motion; components
   reference --duration-* so this one block quiets every decorative effect. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}