/**
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║                    OCEAN MODERN DESIGN SYSTEM                              ║
 * ║                         CSS Design Tokens v2.0                             ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 *
 * A calming, professional design language inspired by coastal waters.
 * Built for Dolphin AI with accessibility and scalability at its core.
 *
 * WCAG Compliance:
 *   - All text colors meet WCAG AA (4.5:1 for normal, 3:1 for large text)
 *   - Focus indicators are 3px minimum with 3:1 contrast
 *   - Interactive elements have visible hover/focus states
 *
 * ADHD-Friendly:
 *   - Reduced motion support via prefers-reduced-motion
 *   - Cognitive load tokens for consistent visual hierarchy
 *   - Focus persistence for improved task tracking
 *
 * Usage:
 *   @import url('tokens.css');
 *
 * Architecture:
 *   TIER 1: Primitives    → Raw values (never reference directly in components)
 *   TIER 2: Semantic      → Purpose-driven tokens (use in component CSS)
 *   TIER 3: Component     → Specific component tokens (optional)
 *
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {

  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 1: PRIMITIVE TOKENS
     Raw design values. Reference these in Tier 2, not directly in components.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Ocean Palette
     Derived from deep ocean to shallow coastal waters
     ───────────────────────────────────────────────────────────────────────── */
  --color-ocean-900: #0c4a6e;   /* Deep ocean - darkest brand */
  --color-ocean-800: #0369a1;   /* Mid ocean - secondary brand */
  --color-ocean-700: #0284c7;   /* Ocean blue */
  --color-ocean-600: #0ea5e9;   /* Light ocean */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Teal Palette (Brand Core)
     The primary brand expression - balance of blue and green
     ───────────────────────────────────────────────────────────────────────── */
  --color-teal-700: #2d6b6c;    /* Dark teal */
  --color-teal-600: #4a9d9e;    /* PRIMARY BRAND COLOR */
  --color-teal-500: #67b8b8;    /* Light teal */
  --color-teal-400: #81d4d4;    /* Lighter teal */
  --color-teal-300: #99e6e6;    /* Lightest teal */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Aqua (Accent)
     High-energy accent for highlights and interactive states
     ───────────────────────────────────────────────────────────────────────── */
  --color-aqua-500: #22d3d3;    /* PRIMARY ACCENT */
  --color-aqua-400: #5eead4;    /* Light aqua */
  --color-aqua-300: #99f6e4;    /* Lightest aqua */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Neutrals (Slate)
     Cool-toned grays for text and UI chrome
     WCAG Contrast Notes:
       - slate-900 on white: 15.3:1 ✓ AAA
       - slate-700 on white: 8.2:1 ✓ AAA
       - slate-600 on white: 5.9:1 ✓ AA (normal), AAA (large)
       - slate-500 on white: 4.6:1 ✓ AA (normal), AAA (large)
       - slate-400 on white: 3.0:1 ✗ Use only for decorative/large text
     ───────────────────────────────────────────────────────────────────────── */
  --color-slate-900: #0f172a;   /* Primary text - 15.3:1 contrast */
  --color-slate-800: #1e293b;   /* Headings - 12.6:1 contrast */
  --color-slate-700: #334155;   /* Strong secondary - 8.2:1 */
  --color-slate-600: #475569;   /* Secondary text - 5.9:1 ✓ AA */
  --color-slate-500: #64748b;   /* Muted text - 4.6:1 ✓ AA minimum */
  --color-slate-400: #94a3b8;   /* Placeholder ONLY - 3.0:1 (decorative) */
  --color-slate-300: #cbd5e1;   /* Borders */
  --color-slate-200: #e2e8f0;   /* Dividers */
  --color-slate-100: #f1f5f9;   /* Background subtle */
  --color-slate-50: #f8fafc;    /* Background lightest */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Natural Tones
     Warm accents derived from beach and sand
     ───────────────────────────────────────────────────────────────────────── */
  --color-foam: #f0fdfa;        /* Sea foam - tinted white */
  --color-sand: #fefce8;        /* Beach sand - warm white */
  --color-white: #ffffff;       /* Pure white */

  /* ─────────────────────────────────────────────────────────────────────────
     Colors: Feedback
     Status colors for validation and alerts
     ───────────────────────────────────────────────────────────────────────── */
  --color-coral-600: #ef4444;   /* Error - strong */
  --color-coral-500: #f87171;   /* Error - default */
  --color-coral-100: #fee2e2;   /* Error - background */

  --color-emerald-600: #059669; /* Success - strong */
  --color-emerald-500: #10b981; /* Success - default */
  --color-emerald-100: #d1fae5; /* Success - background */

  --color-amber-600: #d97706;   /* Warning - strong */
  --color-amber-500: #f59e0b;   /* Warning - default */
  --color-amber-100: #fef3c7;   /* Warning - background */

  /* ─────────────────────────────────────────────────────────────────────────
     Spacing Scale
     4px base unit, following a consistent progression
     ───────────────────────────────────────────────────────────────────────── */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px - Minimum spacing */
  --space-2: 0.5rem;      /* 8px - Tight spacing */
  --space-3: 0.75rem;     /* 12px - Small spacing */
  --space-4: 1rem;        /* 16px - Default spacing */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px - Content spacing */
  --space-8: 2rem;        /* 32px - Section spacing */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px - Card padding */
  --space-16: 4rem;       /* 64px - Section padding */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px - Hero padding */

  /* ─────────────────────────────────────────────────────────────────────────
     Typography Scale
     Based on 1.25 (Major Third) ratio
     ───────────────────────────────────────────────────────────────────────── */
  --text-xs: 0.75rem;     /* 12px - Badges, metadata */
  --text-sm: 0.8125rem;   /* 13px - Labels, captions */
  --text-base: 0.9375rem; /* 15px - Body text */
  --text-lg: 1.0625rem;   /* 17px - Lead text */
  --text-xl: 1.5rem;      /* 24px - Card headings */
  --text-2xl: 1.75rem;    /* 28px - Section headings */
  --text-3xl: 2.25rem;    /* 36px - Page titles */
  --text-4xl: 3rem;       /* 48px - Display headings */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ─────────────────────────────────────────────────────────────────────────
     Border Radius
     Rounded corners following an 8px base
     ───────────────────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 8px;       /* Buttons, inputs */
  --radius-md: 12px;      /* Cards, dropdowns */
  --radius-lg: 16px;      /* Modal, larger cards */
  --radius-xl: 20px;      /* Badges */
  --radius-2xl: 24px;     /* Hero cards */
  --radius-full: 9999px;  /* Avatars, pills */

  /* ─────────────────────────────────────────────────────────────────────────
     Shadows
     Layered shadows for depth without harshness
     ───────────────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* Ocean Modern signature shadows */
  --shadow-glow: 0 8px 32px rgba(74, 157, 158, 0.3);
  --shadow-glow-lg: 0 12px 40px rgba(74, 157, 158, 0.4);
  --shadow-card:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 10px 15px -3px rgba(0, 0, 0, 0.05),
    0 20px 40px rgba(74, 157, 158, 0.1);

  /* ─────────────────────────────────────────────────────────────────────────
     Transitions
     Smooth, water-like motion
     ───────────────────────────────────────────────────────────────────────── */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);    /* Standard easing */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);           /* Accelerate */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);          /* Decelerate */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);    /* Both */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot */

  /* ─────────────────────────────────────────────────────────────────────────
     Z-Index Scale
     Layering system for overlapping elements
     ───────────────────────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;


  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 2: SEMANTIC TOKENS
     Purpose-driven tokens. Use these in your component CSS.
     Change these to theme the system without touching component code.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─────────────────────────────────────────────────────────────────────────
     Brand Colors
     ───────────────────────────────────────────────────────────────────────── */
  --color-brand-primary: var(--color-teal-600);
  --color-brand-primary-hover: var(--color-teal-500);
  --color-brand-primary-active: var(--color-teal-700);
  --color-brand-secondary: var(--color-ocean-800);
  --color-brand-accent: var(--color-aqua-500);

  /* ─────────────────────────────────────────────────────────────────────────
     Text Colors
     ───────────────────────────────────────────────────────────────────────── */
  --color-text-primary: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-600);
  --color-text-muted: var(--color-slate-400);
  --color-text-disabled: var(--color-slate-300);
  --color-text-inverse: var(--color-white);
  --color-text-link: var(--color-teal-600);
  --color-text-link-hover: var(--color-teal-500);

  /* ─────────────────────────────────────────────────────────────────────────
     Background Colors
     ───────────────────────────────────────────────────────────────────────── */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-foam);
  --color-bg-tertiary: var(--color-sand);
  --color-bg-muted: var(--color-slate-50);
  --color-bg-elevated: rgba(255, 255, 255, 0.9);
  --color-bg-overlay: rgba(15, 23, 42, 0.5);
  --color-bg-interactive: rgba(74, 157, 158, 0.1);
  --color-bg-interactive-hover: rgba(74, 157, 158, 0.15);

  /* ─────────────────────────────────────────────────────────────────────────
     Border Colors
     ───────────────────────────────────────────────────────────────────────── */
  --color-border-default: var(--color-slate-300);
  --color-border-muted: var(--color-slate-200);
  --color-border-focus: var(--color-teal-600);
  --color-border-error: var(--color-coral-500);
  --color-border-success: var(--color-emerald-500);

  /* ─────────────────────────────────────────────────────────────────────────
     Interactive States
     ───────────────────────────────────────────────────────────────────────── */
  --color-interactive-primary: var(--color-teal-600);
  --color-interactive-primary-hover: var(--color-teal-500);
  --color-interactive-primary-active: var(--color-teal-700);
  --color-interactive-secondary: var(--color-ocean-800);

  /* ─────────────────────────────────────────────────────────────────────────
     Status Colors
     ───────────────────────────────────────────────────────────────────────── */
  --color-success: var(--color-emerald-500);
  --color-success-bg: var(--color-emerald-100);
  --color-warning: var(--color-amber-500);
  --color-warning-bg: var(--color-amber-100);
  --color-error: var(--color-coral-600);
  --color-error-bg: var(--color-coral-100);

  /* ─────────────────────────────────────────────────────────────────────────
     Focus Ring
     Visible focus indicator for accessibility
     ───────────────────────────────────────────────────────────────────────── */
  --focus-ring-color: rgba(74, 157, 158, 0.2);
  --focus-ring-width: 4px;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);


  /* ═══════════════════════════════════════════════════════════════════════════
     TIER 3: COMPONENT TOKENS
     Specific component values. Optional - can use Tier 2 directly.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─────────────────────────────────────────────────────────────────────────
     Button
     ───────────────────────────────────────────────────────────────────────── */
  --btn-padding-y: var(--space-4);
  --btn-padding-x: var(--space-8);
  --btn-padding-y-sm: var(--space-2);
  --btn-padding-x-sm: var(--space-4);
  --btn-radius: var(--radius-md);
  --btn-font-size: var(--text-base);
  --btn-font-weight: var(--font-semibold);
  --btn-transition: all var(--duration-normal) var(--ease-default);

  /* ─────────────────────────────────────────────────────────────────────────
     Input
     ───────────────────────────────────────────────────────────────────────── */
  --input-padding-y: 14px;
  --input-padding-x: 18px;
  --input-radius: var(--radius-md);
  --input-border-width: 2px;
  --input-font-size: var(--text-base);
  --input-bg: var(--color-white);
  --input-border: var(--color-border-default);
  --input-placeholder: var(--color-text-muted);

  /* ─────────────────────────────────────────────────────────────────────────
     Card
     ───────────────────────────────────────────────────────────────────────── */
  --card-padding: var(--space-12);
  --card-padding-sm: var(--space-6);
  --card-radius: var(--radius-2xl);
  --card-bg: var(--color-bg-elevated);
  --card-border: rgba(74, 157, 158, 0.1);
  --card-shadow: var(--shadow-card);

  /* ─────────────────────────────────────────────────────────────────────────
     Badge
     ───────────────────────────────────────────────────────────────────────── */
  --badge-padding-y: 6px;
  --badge-padding-x: 14px;
  --badge-radius: var(--radius-xl);
  --badge-font-size: var(--text-xs);
  --badge-font-weight: var(--font-semibold);
  --badge-letter-spacing: 1px;

  /* ─────────────────────────────────────────────────────────────────────────
     Progress Dot
     ───────────────────────────────────────────────────────────────────────── */
  --progress-dot-size: 12px;
  --progress-dot-gap: var(--space-2);
  --progress-dot-color: var(--color-border-default);
  --progress-dot-active-color: var(--color-brand-primary);
  --progress-dot-active-ring: 0 0 0 4px rgba(74, 157, 158, 0.2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   GRADIENTS
   Ocean Modern signature gradient definitions
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Primary button gradient */
  --gradient-primary: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-ocean-800) 100%);

  /* Active toggle gradient */
  --gradient-toggle: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-teal-500) 100%);

  /* Accent/Icon gradient */
  --gradient-accent: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-aqua-500) 100%);

  /* Text gradient (for headings) */
  --gradient-text: linear-gradient(135deg, var(--color-slate-900) 0%, var(--color-ocean-900) 100%);
  --gradient-text-brand: linear-gradient(135deg, var(--color-teal-600) 0%, var(--color-ocean-900) 100%);

  /* Background selections */
  --gradient-selection: linear-gradient(135deg, rgba(74, 157, 158, 0.1) 0%, rgba(34, 211, 211, 0.1) 100%);

  /* Page background */
  --gradient-page: linear-gradient(180deg, var(--color-foam) 0%, var(--color-white) 50%, var(--color-sand) 100%);
  --gradient-page-light: var(--gradient-page);

  /* ═══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY SYSTEM
     Font families and base typography tokens
     ═══════════════════════════════════════════════════════════════════════════ */
  --font-family-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Aliased font size tokens for components.css compatibility */
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);
  --font-size-3xl: var(--text-3xl);
  --font-size-4xl: var(--text-4xl);

  /* Aliased font weight tokens */
  --font-weight-normal: var(--font-normal);
  --font-weight-medium: var(--font-medium);
  --font-weight-semibold: var(--font-semibold);
  --font-weight-bold: var(--font-bold);

  /* Line height aliases */
  --line-height-tight: var(--leading-tight);
  --line-height-snug: var(--leading-snug);
  --line-height-normal: var(--leading-normal);
  --line-height-relaxed: var(--leading-relaxed);

  /* ═══════════════════════════════════════════════════════════════════════════
     SURFACE COLORS
     Background surfaces for components.css compatibility
     ═══════════════════════════════════════════════════════════════════════════ */
  --color-surface: var(--color-white);
  --color-surface-primary: var(--color-white);
  --color-surface-secondary: var(--color-foam);
  --color-surface-tertiary: var(--color-sand);
  --color-surface-elevated: var(--color-bg-elevated);

  /* Border aliases for components.css */
  --color-border-subtle: var(--color-border-muted);
  --color-border-hover: var(--color-teal-500);

  /* ═══════════════════════════════════════════════════════════════════════════
     TRANSITIONS (Aliased for components.css)
     ═══════════════════════════════════════════════════════════════════════════ */
  --transition-fast: all var(--duration-fast) var(--ease-default);
  --transition-normal: all var(--duration-normal) var(--ease-default);
  --transition-slow: all var(--duration-slow) var(--ease-default);
  --transition-lift: transform var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);

  /* Focus shadow alias */
  --shadow-focus: var(--focus-ring);

  /* ═══════════════════════════════════════════════════════════════════════════
     ADHD-FRIENDLY TOKENS
     Designed for neurodivergent users: reduced cognitive load, clear states
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Focus Persistence - longer focus ring visibility for task tracking */
  --focus-ring-adhd: 0 0 0 3px var(--color-teal-500), 0 0 0 6px rgba(74, 157, 158, 0.25);
  --focus-duration: 200ms;  /* Slower fade for better visibility */

  /* Cognitive Load Indicators - visual hierarchy helpers */
  --priority-high: var(--color-coral-500);
  --priority-medium: var(--color-amber-500);
  --priority-low: var(--color-teal-500);

  /* Progress Feedback - clear completion states */
  --state-incomplete: var(--color-slate-300);
  --state-in-progress: var(--color-teal-500);
  --state-complete: var(--color-emerald-500);
  --state-error: var(--color-coral-500);

  /* Reduced Complexity - simpler shadows for less visual noise */
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-focus-subtle: 0 0 0 2px var(--color-teal-500);

  /* Time Estimation Helpers - for time-blind users */
  --duration-micro: 100ms;   /* Instant feedback */
  --duration-quick: 200ms;   /* Quick actions */
  --duration-standard: 400ms; /* Normal transitions */
  --duration-deliberate: 600ms; /* Important state changes */

  /* Touch Target Minimums (WCAG 2.5.5) */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;

  /* ═══════════════════════════════════════════════════════════════════════════
     GESTALT PRINCIPLES TOKENS
     Visual grouping and hierarchy support
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Proximity - consistent grouping distances */
  --proximity-tight: var(--space-1);    /* Related items */
  --proximity-related: var(--space-3);  /* Same group */
  --proximity-separate: var(--space-6); /* Different groups */
  --proximity-distinct: var(--space-12); /* Separate sections */

  /* Similarity - consistent styling for related elements */
  --group-border-radius: var(--radius-lg);
  --group-padding: var(--space-4);
  --group-background: var(--color-bg-interactive);

  /* Continuation - flow indicators */
  --continuation-line: 2px solid var(--color-border-muted);
  --continuation-arrow: var(--color-teal-500);

  /* Closure - container boundaries */
  --closure-border: 1px solid var(--color-border-default);
  --closure-shadow: var(--shadow-sm);

  /* Figure/Ground - elevation hierarchy */
  --elevation-0: none;                    /* Flat */
  --elevation-1: var(--shadow-sm);        /* Slightly raised */
  --elevation-2: var(--shadow-md);        /* Cards */
  --elevation-3: var(--shadow-lg);        /* Modals */
  --elevation-4: var(--shadow-xl);        /* Popovers */
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE TOKENS
   Automatic dark mode support via prefers-color-scheme
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode semantic overrides */
    --color-text-primary: var(--color-slate-50);
    --color-text-secondary: var(--color-slate-300);
    --color-text-muted: var(--color-slate-400);
    --color-text-disabled: var(--color-slate-500);

    --color-bg-primary: var(--color-slate-900);
    --color-bg-secondary: var(--color-slate-800);
    --color-bg-tertiary: var(--color-slate-700);
    --color-bg-muted: var(--color-slate-800);
    --color-bg-elevated: rgba(30, 41, 59, 0.95);

    --color-surface: var(--color-slate-900);
    --color-surface-primary: var(--color-slate-900);
    --color-surface-secondary: var(--color-slate-800);
    --color-surface-tertiary: var(--color-slate-700);
    --color-surface-elevated: rgba(30, 41, 59, 0.95);

    --color-border-default: var(--color-slate-600);
    --color-border-muted: var(--color-slate-700);
    --color-border-subtle: var(--color-slate-700);

    --gradient-page: linear-gradient(180deg, var(--color-slate-900) 0%, #0c1929 100%);

    /* Adjusted shadows for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 8px 32px rgba(74, 157, 158, 0.4);

    /* Focus ring brighter for dark backgrounds */
    --focus-ring-color: rgba(103, 184, 184, 0.4);
    --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   Respect user preferences for motion sensitivity
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-micro: 0ms;
    --duration-quick: 0ms;
    --duration-standard: 0ms;
    --duration-deliberate: 0ms;

    --transition-fast: none;
    --transition-normal: none;
    --transition-slow: none;
    --transition-lift: none;

    --ease-bounce: var(--ease-default); /* Remove bounce */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY COMPATIBILITY ALIASES
   Short-form tokens used in older pages (pilot-signup.html, etc.)
   Maps to proper three-tier tokens for backward compatibility
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Legacy color aliases - DO NOT USE IN NEW CODE */
  --ocean-deep: var(--color-ocean-900);
  --ocean-mid: var(--color-ocean-800);
  --teal: var(--color-teal-600);
  --teal-light: var(--color-teal-500);
  --aqua: var(--color-aqua-500);
  --foam: var(--color-foam);
  --sand: var(--color-sand);
  --white: var(--color-white);
  --text: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --border: var(--color-border-default);
}