/* UI Kit v1 — Design tokens */
/* Inspired by SKILLS_CATALOG visual style */

/* Dark theme (default) */
:root,
[data-theme="dark"] {
  /* Colors - Dark (SKILLS_CATALOG palette) */
  --ui-color-bg: #0f172a;            /* app background - deeper blue-black */
  --ui-color-surface: #1e293b;       /* cards/panels - slate */
  --ui-color-surface-2: #334155;     /* subtle surface (tables/sidebars) */
  --ui-color-border: #475569;        /* dividers/borders - slate-600 */
  --ui-color-text: #f1f5f9;          /* primary text - slate-100 */
  --ui-color-muted: #94a3b8;         /* secondary text - slate-400 */
  --ui-color-accent: #3b82f6;        /* primary action - blue-500 */
  --ui-color-accent-fg: #ffffff;     /* text on accent backgrounds */
  --ui-color-success: #22c55e;       /* success - green-500 */
  --ui-color-warning: #eab308;       /* warning - yellow-500 */
  --ui-color-danger: #ef4444;        /* danger - red-500 */
  --ui-color-purple: #a855f7;        /* purple accent */
  --ui-color-cyan: #06b6d4;          /* cyan accent */
  --ui-color-mix-darken: #000000;    /* darkening color for color-mix operations */

  /* Badge colors (Polaris-inspired) */
  --ui-badge-info-bg: #d5ebff;
  --ui-badge-info-fg: #003a5a;
  --ui-badge-success-bg: #affebf;
  --ui-badge-success-fg: #014b40;
  --ui-badge-caution-bg: #ffeb78;
  --ui-badge-caution-fg: #4f4700;
  --ui-badge-warning-bg: #ffd6a4;
  --ui-badge-warning-fg: #5e4200;
  --ui-badge-critical-bg: #fed1d7;
  --ui-badge-critical-fg: #8e0b21;
  --ui-badge-magic-bg: #e4deff;
  --ui-badge-magic-fg: #402e78;

  /* Airspace category colors */
  --ui-airspace-fir: #1e88e5;
  --ui-airspace-controlled: #43a047;
  --ui-airspace-hazard: #e53935;
  --ui-airspace-special: #fb8c00;
  --ui-airspace-other: #607d8b;

  /* ICAO airspace class colors (A-G) */
  --ui-airspace-class-a: #7f0000;
  --ui-airspace-class-b: #c62828;
  --ui-airspace-class-c: #ef6c00;
  --ui-airspace-class-d: #f9a825;
  --ui-airspace-class-e: #1e88e5;
  --ui-airspace-class-f: #43a047;
  --ui-airspace-class-g: #546e7a;

  /* Status colors (unified for badges, dots, cards) */
  --ui-status-active-color: var(--ui-color-success);
  --ui-status-stale-color: var(--ui-color-warning);
  --ui-status-lost-color: var(--ui-color-danger);
  --ui-status-inactive-color: var(--ui-color-muted);

  /* Spacing */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;

  /* Radius (C2 tactical - sharp corners) */
  --ui-radius-1: 4px;
  --ui-radius-2: 6px;
  --ui-radius-3: 8px;

  /* Typography */
  --ui-font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Shadows (adjusted for dark) */
  --ui-shadow-1: 0 1px 2px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.15);
  --ui-shadow-2: 0 6px 16px rgba(0,0,0,.25);
  --ui-shadow-3: 0 8px 32px rgba(0,0,0,.4);
  --ui-shadow-subtle: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --ui-shadow-panel: -4px 0 16px rgba(0, 0, 0, 0.2);
  --ui-focus-ring: 0 0 0 3px rgba(255,255,255,.35);

  /* Transitions */
  --ui-transition-fast: 120ms ease;
  --ui-transition-base: 150ms ease;
  --ui-transition-slow: 200ms ease;
  --ui-transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Pre-computed color mixes (performance optimization) */
  --ui-focus-ring-color: color-mix(in srgb, var(--ui-color-accent) 25%, transparent);
  --ui-hover-bg: color-mix(in srgb, var(--ui-color-surface-2) 70%, var(--ui-color-accent) 30%);
  --ui-hover-border: color-mix(in srgb, var(--ui-color-border) 60%, var(--ui-color-accent) 40%);
  --ui-accent-pressed: color-mix(in srgb, var(--ui-color-accent) 85%, var(--ui-color-mix-darken) 15%);
  --ui-danger-bg-subtle: color-mix(in srgb, var(--ui-color-danger) 15%, transparent);
  --ui-success-bg-subtle: color-mix(in srgb, var(--ui-color-success) 15%, transparent);
  --ui-warning-bg-subtle: color-mix(in srgb, var(--ui-color-warning) 15%, transparent);

  /* Overlays & Backdrops */
  --ui-color-overlay: rgba(0, 0, 0, 0.85);
  --ui-color-overlay-light: rgba(0, 0, 0, 0.5);
  --ui-color-attribution-bg: rgba(26, 29, 36, 0.8);

  /* Additional surfaces */
  --ui-color-surface-3: #2d3139;

  /* Domain colors (for object types) */
  --ui-color-air: var(--ui-color-accent);
  --ui-color-sea: #10b981;
  --ui-color-land: var(--ui-color-warning);

  /* Theme preview colors (static, not affected by current theme) */
  --ui-theme-preview-dark-start: #1a1a2e;
  --ui-theme-preview-dark-end: #16213e;
  --ui-theme-preview-light-start: #f5f5f5;
  --ui-theme-preview-light-end: #e0e0e0;
  --ui-theme-preview-hc-start: #000000;
  --ui-theme-preview-hc-end: #1a1a1a;
  --ui-theme-preview-hc-border: #ffff00;
}

/* Light theme (monochrome) */
[data-theme="light"] {
  --ui-color-bg: #f7f8fa;
  --ui-color-surface: #ffffff;
  --ui-color-surface-2: #f1f3f6;
  --ui-color-border: #dde2ea;
  --ui-color-text: #111827;
  --ui-color-text-secondary: #6b7280;
  --ui-color-muted: #6b7280;
  --ui-color-accent: #111827;            /* monochrome: dark accent */
  --ui-color-accent-fg: #ffffff;
  --ui-color-success: #16a34a;
  --ui-color-warning: #d97706;
  --ui-color-danger: #dc2626;

  --ui-shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --ui-shadow-2: 0 6px 16px rgba(0,0,0,.08);
  --ui-shadow-3: 0 8px 32px rgba(0,0,0,.15);
  --ui-focus-ring: 0 0 0 3px rgba(17,24,39,.25);

  --ui-color-overlay: rgba(0, 0, 0, 0.6);
  --ui-color-overlay-light: rgba(0, 0, 0, 0.3);
  --ui-color-surface-3: #e5e8ec;
  --ui-color-sea: #059669;
}

/* High Contrast theme (monochrome) */
[data-theme="high-contrast"] {
  --ui-color-bg: #000000;
  --ui-color-surface: #0a0a0a;
  --ui-color-surface-2: #141414;
  --ui-color-border: #ffffff;
  --ui-color-text: #ffffff;
  --ui-color-text-secondary: #d4d4d4;
  --ui-color-muted: #d4d4d4;
  --ui-color-accent: #ffffff;            /* monochrome: white accent */
  --ui-color-accent-fg: #000000;
  --ui-color-success: #4ade80;
  --ui-color-warning: #fbbf24;
  --ui-color-danger: #f87171;

  --ui-shadow-1: 0 0 0 1px #ffffff;
  --ui-shadow-2: 0 0 0 2px #ffffff;
  --ui-shadow-3: 0 0 0 3px #ffffff;
  --ui-focus-ring: 0 0 0 3px rgba(255,255,255,.5);

  --ui-color-overlay: rgba(0, 0, 0, 0.95);
  --ui-color-overlay-light: rgba(0, 0, 0, 0.7);
  --ui-color-surface-3: #1f1f1f;
  --ui-color-sea: #34d399;
}