/**
 * Operation Phoenix — Design Tokens
 * Tactical command visual foundation. Layout-agnostic.
 * Brand overrides applied at runtime via ConfigAPI.applyBrandTheme().
 */

:root {
  color-scheme: dark;

  /* ── Brand (overridable) ── */
  --phx-brand-primary: #1e4a72;
  --phx-brand-secondary: #2a608f;
  --phx-accent: #3dafff;
  --phx-accent-dim: #2b8fd4;
  --phx-highlight: #34c759;

  /* ── Surfaces ── */
  --phx-bg-void: #05080c;
  --phx-bg-base: #0a0e14;
  --phx-bg-raised: #111820;
  --phx-bg-elevated: #182028;
  --phx-bg-inset: #0c1018;

  /* ── Glass / HUD ── */
  --phx-glass-bg: rgba(12, 16, 24, 0.82);
  --phx-glass-bg-strong: rgba(8, 12, 18, 0.92);
  --phx-glass-border: rgba(255, 255, 255, 0.1);
  --phx-glass-blur: 16px;

  /* ── Text ── */
  --phx-text-primary: #e8eef4;
  --phx-text-secondary: #a8b4c4;
  --phx-text-muted: #6e7d90;
  --phx-text-inverse: #05080c;

  /* ── Borders ── */
  --phx-border-subtle: rgba(255, 255, 255, 0.07);
  --phx-border-default: rgba(255, 255, 255, 0.12);
  --phx-border-strong: rgba(255, 255, 255, 0.18);
  --phx-border-focus: var(--phx-accent);

  /* ── Semantic status ── */
  --phx-success: #34c759;
  --phx-success-bg: rgba(52, 199, 89, 0.14);
  --phx-success-border: rgba(52, 199, 89, 0.38);

  --phx-warning: #e8a317;
  --phx-warning-bg: rgba(232, 163, 23, 0.14);
  --phx-warning-border: rgba(232, 163, 23, 0.4);

  --phx-danger: #ff453a;
  --phx-danger-bg: rgba(255, 69, 58, 0.14);
  --phx-danger-border: rgba(255, 69, 58, 0.42);

  --phx-info: var(--phx-accent);
  --phx-info-bg: rgba(61, 175, 255, 0.12);
  --phx-info-border: rgba(61, 175, 255, 0.35);

  --phx-neutral: #8b9aab;
  --phx-neutral-bg: rgba(139, 154, 171, 0.12);
  --phx-neutral-border: rgba(139, 154, 171, 0.28);

  /* Feed / operational status (Phase 1 alignment) */
  --phx-status-live: var(--phx-success);
  --phx-status-not-configured: var(--phx-neutral);
  --phx-status-offline: var(--phx-warning);
  --phx-status-error: var(--phx-danger);

  /* Threat bands */
  --phx-threat-green: #34c759;
  --phx-threat-blue: #3dafff;
  --phx-threat-yellow: #e8a317;
  --phx-threat-orange: #ff8c00;
  --phx-threat-red: #ff453a;

  /* ── Typography ── */
  --phx-font-ui: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  --phx-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --phx-font-data: "SF Mono", "Cascadia Mono", ui-monospace, "Cascadia Code", monospace;

  --phx-text-xs: 0.6875rem;
  --phx-text-sm: 0.8125rem;
  --phx-text-base: 0.9375rem;
  --phx-text-md: 1.0625rem;
  --phx-text-lg: 1.25rem;
  --phx-text-xl: 1.75rem;
  --phx-text-hero: 2.25rem;

  --phx-leading-tight: 1.2;
  --phx-leading-normal: 1.45;
  --phx-tracking-tight: -0.02em;
  --phx-tracking-wide: 0.06em;
  --phx-tracking-wider: 0.08em;

  /* ── Spacing (iPad / touch) ── */
  --phx-space-1: 0.25rem;
  --phx-space-2: 0.5rem;
  --phx-space-3: 0.75rem;
  --phx-space-4: 1rem;
  --phx-space-5: 1.25rem;
  --phx-space-6: 1.5rem;
  --phx-touch-min: 44px;

  /* ── Radius ── */
  --phx-radius-sm: 6px;
  --phx-radius-md: 10px;
  --phx-radius-lg: 14px;
  --phx-radius-xl: 18px;
  --phx-radius-pill: 999px;

  /* ── Elevation ── */
  --phx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --phx-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --phx-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
  --phx-shadow-glow-accent: 0 0 0 1px rgba(61, 175, 255, 0.25), 0 0 20px rgba(61, 175, 255, 0.08);
  --phx-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ── Motion (GPU-friendly: transform + opacity only) ── */
  --phx-motion-instant: 0ms;
  --phx-motion-fast: 120ms;
  --phx-motion-base: 200ms;
  --phx-motion-slow: 320ms;
  --phx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --phx-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Focus / interaction ── */
  --phx-focus-ring: 0 0 0 2px var(--phx-bg-void), 0 0 0 4px var(--phx-accent);
  --phx-focus-ring-danger: 0 0 0 2px var(--phx-bg-void), 0 0 0 4px var(--phx-danger);

  /* ── Icon scale ── */
  --phx-icon-sm: 1rem;
  --phx-icon-md: 1.25rem;
  --phx-icon-lg: 1.5rem;

  /* ── Safe area ── */
  --phx-safe-top: env(safe-area-inset-top, 0px);
  --phx-safe-right: env(safe-area-inset-right, 0px);
  --phx-safe-bottom: env(safe-area-inset-bottom, 0px);
  --phx-safe-left: env(safe-area-inset-left, 0px);

  /* ── Legacy aliases (existing CSS + JS) ── */
  --color-primary: var(--phx-brand-primary);
  --color-secondary: var(--phx-brand-secondary);
  --color-accent: var(--phx-accent);
  --color-bg: var(--phx-bg-base);
  --color-card: var(--phx-bg-raised);
  --color-text: var(--phx-text-primary);
  --color-text-muted: var(--phx-text-muted);
  --color-danger: var(--phx-danger);
  --color-warning: var(--phx-warning);
  --color-success: var(--phx-success);
  --color-border: var(--phx-border-default);

  --font-base: 16px;
  --font-sm: var(--phx-text-sm);
  --font-lg: var(--phx-text-lg);
  --radius: var(--phx-radius-md);
  --gap: var(--phx-space-4);
  --header-h: auto;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --phx-motion-fast: 0ms;
    --phx-motion-base: 0ms;
    --phx-motion-slow: 0ms;
  }
}