/**
 * CrewLink Design System - Tokens
 * Master Foundation Palette & Derived Semantic Tokens
 */

:root {
  /* =========================================================================
     1. FOUNDATION MASTER PALETTE (Single Source of Truth)
     ========================================================================= */

  /* Primary Brand (Alps Terracotta / Mountain Endurance) */
  --palette-brand-h: 13;
  --palette-brand-s: 75%;
  --palette-brand-l: 55%;
  --palette-brand: #E25C38;
  --palette-brand-rgb: 226, 92, 56;
  --palette-brand-light: #ea6945;
  --palette-brand-light-rgb: 234, 105, 69;

  /* Secondary Accent / Glacier Blue (Links, Metadata, Waypoint Tech) */
  --palette-sky-h: 199;
  --palette-sky-s: 95%;
  --palette-sky-l: 61%;
  --palette-sky: #38bdf8;
  --palette-sky-rgb: 56, 189, 248;

  /* Accent / Navigation Course (Electric Cyan - Garmin Nav) */
  --palette-cyan-h: 186;
  --palette-cyan-s: 100%;
  --palette-cyan-l: 50%;
  --palette-cyan: #00e5ff;
  --palette-cyan-rgb: 0, 229, 255;

  /* Live / Active Traversed (Vivid Lime - Garmin Live) */
  --palette-lime-h: 151;
  --palette-lime-s: 100%;
  --palette-lime-l: 45%;
  --palette-lime: #00e676;
  --palette-lime-rgb: 0, 230, 118;

  /* Live Lead / Mint */
  --palette-mint-h: 151;
  --palette-mint-s: 82%;
  --palette-mint-l: 68%;
  --palette-mint: #69f0ae;
  --palette-mint-rgb: 105, 240, 174;

  /* Paused / Warning / Checkpoints (Warm Amber) */
  --palette-amber-h: 38;
  --palette-amber-s: 92%;
  --palette-amber-l: 50%;
  --palette-amber: #f59e0b;
  --palette-amber-rgb: 245, 158, 11;

  /* Alert / Error / Danger (Rose Red) */
  --palette-red-h: 0;
  --palette-red-s: 84%;
  --palette-red-l: 60%;
  --palette-red: #ef4444;
  --palette-red-rgb: 239, 68, 68;
  --palette-red-light: #f87171;
  --palette-red-light-rgb: 248, 113, 113;
  --palette-red-dark: #dc2626;
  --palette-red-dark-rgb: 220, 38, 38;

  /* Slate Neutrals (Unified Forest Shadow & Nordic Slate Scale) */
  --palette-slate-950: #0f172a; /* Deep Forest Shadow canvas background */
  --palette-slate-900: #0f172a; /* Forest Shadow base */
  --palette-slate-850: #1e293b; /* Nordic Slate card surface */
  --palette-slate-800: #1e293b; /* Surface container */
  --palette-slate-700: #334155; /* Alloy Gray elevated controls */
  --palette-slate-600: #475569; /* Subtle borders / inactive text */
  --palette-slate-500: #64748b; /* Muted text / tertiary icons */
  --palette-slate-400: #94a3b8; /* Nordic Mist secondary text & labels */
  --palette-slate-300: #cbd5e1; /* Body text / active labels */
  --palette-slate-200: #e2e8f0; /* Crisp labels */
  --palette-slate-100: #f1f5f9; /* High-contrast Off-White headings */
  --palette-slate-50:  #f8fafc; /* Crisp Chalk White */

  /* Crisp Whites & Blacks */
  --palette-white: #ffffff;
  --palette-white-rgb: 255, 255, 255;
  --palette-black: #000000;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* =========================================================================
     2. DERIVED SEMANTIC SURFACES & CONTAINERS
     (Derived strictly from master slate & brand palette)
     ========================================================================= */
  --color-bg-base: var(--palette-slate-950);
  --color-bg-surface: var(--palette-slate-800);
  --color-bg-elevated: var(--palette-slate-700);
  --color-bg-surface-elevated: var(--palette-slate-700);
  --color-bg-glass: rgba(15, 23, 42, 0.88);
  --color-bg-glass-card: rgba(30, 41, 59, 0.75);
  --color-bg-glass-input: #0b1120;
  --color-bg-glass-pill: rgba(30, 41, 59, 0.85);
  --color-bg-glass-frosted: rgba(var(--palette-white-rgb), 0.22);

  /* Borders (derived from slate scale) */
  --color-border-subtle: rgba(51, 65, 85, 0.6);
  --color-border-default: #334155;
  --color-border-strong: #475569;
  --color-border-glass: rgba(var(--palette-white-rgb), 0.2);
  --color-border-glass-frosted: rgba(var(--palette-white-rgb), 0.45);

  /* Text & Foreground (derived from slate scale) */
  --color-text-bright: var(--palette-slate-50);
  --color-text-primary: var(--palette-slate-100);
  --color-text-secondary: var(--palette-slate-300);
  --color-text-muted: var(--palette-slate-400);
  --color-text-subtle: var(--palette-slate-500);
  --color-text-inverse: #0b1120;

  /* Brand Semantic Derivations */
  --color-brand-primary: var(--palette-brand);
  --color-brand-primary-hover: #ea6945;
  --color-brand-primary-active: #c94c2a;
  --color-brand-accent: var(--palette-sky);
  --color-brand-bg-subtle: rgba(var(--palette-brand-rgb), 0.12);
  --color-brand-border-subtle: rgba(var(--palette-brand-rgb), 0.35);
  --color-brand-glow: rgba(var(--palette-brand-rgb), 0.25);

  /* Status Colors (derived directly from palette) */
  --color-status-active: var(--palette-lime);
  --color-status-finished: var(--palette-cyan);
  --color-status-paused: var(--palette-amber);
  --color-status-warning: var(--palette-amber);
  --color-status-inactive: var(--palette-slate-500);
  --color-status-alert: var(--palette-red);
  --color-status-alert-hover: var(--palette-red-dark);
  --color-status-alert-bright: var(--palette-red-light);

  /* Status Derivations (Badges, Tints, Glows) */
  --color-active-bg: rgba(var(--palette-lime-rgb), 0.15);
  --color-active-border: rgba(var(--palette-lime-rgb), 0.45);
  --color-active-glow: rgba(var(--palette-lime-rgb), 0.25);

  --color-paused-bg: rgba(var(--palette-amber-rgb), 0.15);
  --color-paused-border: rgba(var(--palette-amber-rgb), 0.45);
  --color-paused-glow: rgba(var(--palette-amber-rgb), 0.25);

  --color-warning-bg: rgba(var(--palette-amber-rgb), 0.15);
  --color-warning-border: rgba(var(--palette-amber-rgb), 0.45);
  --color-warning-glow: rgba(var(--palette-amber-rgb), 0.25);

  --color-finished-bg: rgba(var(--palette-cyan-rgb), 0.15);
  --color-finished-border: rgba(var(--palette-cyan-rgb), 0.45);
  --color-finished-glow: rgba(var(--palette-cyan-rgb), 0.25);

  --color-alert-bg: rgba(var(--palette-red-rgb), 0.15);
  --color-alert-border: rgba(var(--palette-red-rgb), 0.45);
  --color-alert-glow: rgba(var(--palette-red-rgb), 0.25);

  /* Course & Trail Colors (Option 1: Garmin High-Viz with Subtle Halo) */
  --color-route-base: var(--palette-cyan);
  --color-route-casing: #000000;
  --color-route-remaining: rgba(var(--palette-cyan-rgb), 0.55);
  --color-trail-completed: var(--palette-lime);
  --color-trail-lead: var(--palette-mint);
  --color-trail-casing: #000000;
  --color-detour-casing: var(--palette-slate-800);
  --track-stroke-weight: 5px;
  --track-casing-weight: 8px;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --size-touch-target: 48px;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows & Elevation */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-dock: 0 -4px 24px rgba(0, 0, 0, 0.7);

  /* Z-Index Hierarchy */
  --z-map: 1;
  --z-controls: 500;
  --z-bottom-dock: 1000;
  --z-header-card: 1000;
  --z-modal-backdrop: 2000;
  --z-modal-content: 2100;
  --z-toast: 3000;

  /* Responsive Breakpoints (reference values) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;

  /* Default Activity State Theme (Inactive) */
  --state-accent: var(--color-status-inactive);
  --state-border: var(--color-border-default);
  --state-glow: rgba(100, 116, 139, 0.15);
  --state-badge-bg: rgba(100, 116, 139, 0.18);
  --state-badge-text: var(--palette-slate-400);
}

/* Dynamic Activity State Cascade (derived directly from the status palette) */
[data-activity-state="active"] {
  --state-accent: var(--color-status-active);
  --state-border: var(--color-active-border);
  --state-glow: var(--color-active-glow);
  --state-badge-bg: var(--color-active-bg);
  --state-badge-text: var(--palette-mint);
}

[data-activity-state="paused"] {
  --state-accent: var(--color-status-paused);
  --state-border: var(--color-paused-border);
  --state-glow: var(--color-paused-glow);
  --state-badge-bg: var(--color-paused-bg);
  --state-badge-text: var(--palette-amber);
}

[data-activity-state="finished"] {
  --state-accent: var(--color-status-finished);
  --state-border: var(--color-finished-border);
  --state-glow: var(--color-finished-glow);
  --state-badge-bg: var(--color-finished-bg);
  --state-badge-text: var(--palette-cyan);
}

[data-activity-state="inactive"] {
  --state-accent: var(--color-status-inactive);
  --state-border: var(--color-border-default);
  --state-glow: rgba(100, 116, 139, 0.15);
  --state-badge-bg: rgba(100, 116, 139, 0.18);
  --state-badge-text: var(--palette-slate-400);
}

[data-activity-state="background"],
.state-background {
  --state-accent: var(--palette-sky);
  --state-border: rgba(56, 189, 248, 0.35);
  --state-glow: rgba(56, 189, 248, 0.2);
  --state-badge-bg: rgba(56, 189, 248, 0.15);
  --state-badge-text: var(--palette-sky);
}

[data-activity-state="alert"],
[data-activity-state="never_seen"],
[data-activity-state="error"] {
  --state-accent: var(--color-status-alert);
  --state-border: var(--color-alert-border);
  --state-glow: var(--color-alert-glow);
  --state-badge-bg: var(--color-alert-bg);
  --state-badge-text: hsl(var(--palette-red-h), var(--palette-red-s), 70%);
}