/**
 * 🧭 LogPacer Design Tokens - Manifesto Edition
 *
 * "Playful Precision for Serious Work"
 *
 * These tokens embody our design philosophy:
 * - Software should have manners
 * - Precision is empathy
 * - Serious doesn't mean sterile
 * - Design is a promise
 *
 * Every value here is intentional, derived from core principles
 * using OKLCH color space for perceptual uniformity.
 */

@theme {
  /* ============================================
     🤲 HUMAN SCALE - "Software should have manners"
     Spacing that breathes, motion that respects
     ============================================ */

  /* Breathing room - never cramped */
  --space-breath: 0.5rem;     /* 8px - Minimum breathing room */
  --space-comfort: 1rem;      /* 16px - Comfortable touch target */
  --space-generous: 1.5rem;   /* 24px - Generous whitespace */
  --space-luxurious: 3rem;    /* 48px - Luxurious separation */

  /* Polite transitions - smooth, never jarring */
  --motion-instant: 50ms;     /* Immediate feedback */
  --motion-micro: 150ms;      /* Micro-interactions */
  --motion-gentle: 300ms;     /* State transitions */
  --motion-deliberate: 500ms; /* Major changes */

  /* Respectful easing */
  --ease-natural: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ============================================
     🗣️ TYPOGRAPHIC VOICE - "Tone, not volume"
     Weight and hierarchy that speaks clearly
     ============================================ */

  /* Font families - Microsoft's modern elegance meets functional code */
  --font-family-sans: "Noto Sans", "Aptos", "Segoe UI", system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  /* Font weights - aligned with Space Grotesk's range (300-700) */
  --tone-loud: 600;      /* Semibold - Headlines, important actions */
  --tone-calm: 400;      /* Normal - Body text, comfortable reading */
  --tone-whisper: 500;   /* Medium - Labels, subtle emphasis */

  /* ============================================
     📦 ELEVATION - "Depth with purpose"
     Systematic shadow and border hierarchy
     ============================================ */

  --elevation-flat: inset 0 0 0 1px var(--color-border);
  --elevation-raised: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --elevation-floating: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --elevation-modal: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ============================================
     🎨 TRUST THROUGH CALM - "Quiet, confident voice"
     Brand colors that don't shout
     ============================================ */

  /* Primary palette - Steel Blue axis */
  --brand-primary: oklch(52% 0.06 220);     /* #4A6A77 - Confident action */
  --brand-secondary: oklch(38% 0.04 220);   /* #2F3F48 - Quiet depth */
  --brand-accent: oklch(65% 0.05 220);      /* #7A9A9E - Gentle highlight */
  --brand-whisper: oklch(80% 0.04 220);     /* #9EBEC3 - Barely there */
  --brand-midnight: oklch(28% 0.03 220);    /* #1D2A2F - Dark foundation */

  /* Brand hue and chroma for derivation */
  --brand-hue: 220;
  --brand-chroma: 0.04;

  /* ============================================
     🎯 ACCENT COLORS - Interactive highlights
     Used for chips, focus rings, active tabs, links
     ============================================ */

  --color-accent: oklch(48% 0.13 220);
  --color-accent-dark: oklch(38% 0.13 220);
  --color-accent-emphasis: oklch(34% 0.15 220);
  --color-accent-subtle: oklch(95% 0.04 220);
  --color-accent-primary: oklch(48% 0.13 220);
  --color-accent-500: oklch(48% 0.13 220);

  /* Full spectrum for nuanced UI */
  --color-primary-50: oklch(97% 0.01 220);
  --color-primary-100: oklch(94% 0.02 220);
  --color-primary-200: oklch(88% 0.04 220);
  --color-primary-300: oklch(78% 0.06 220);
  --color-primary-400: oklch(68% 0.08 220);
  --color-primary-500: var(--brand-primary);
  --color-primary-600: oklch(38% 0.04 220);
  --color-primary-700: oklch(30% 0.03 220);
  --color-primary-800: oklch(24% 0.02 220);
  --color-primary-900: oklch(18% 0.01 220);
  --color-primary-950: oklch(12% 0.005 220);

  /* ============================================
     💬 COLOR WITH INTENT - "Emotion is coded"
     Semantic colors that communicate, not decorate
     ============================================ */

  /* Core semantic hues */
  --semantic-success-hue: 155;
  --semantic-success-chroma: 0.15;
  --semantic-success-core: oklch(61% 0.15 155);

  --semantic-warning-hue: 55;
  --semantic-warning-chroma: 0.17;
  --semantic-warning-core: oklch(63% 0.17 55);

  --semantic-error-hue: 25;
  --semantic-error-chroma: 0.19;
  --semantic-error-core: oklch(58% 0.19 25);

  --semantic-info-hue: 210;
  --semantic-info-chroma: 0.10;
  --semantic-info-core: oklch(60% 0.10 210);

  /* Semantic spectrums for flexibility */
  --color-success-50: oklch(97% 0.035 155);
  --color-success-100: oklch(94% 0.07 155);
  --color-success-200: oklch(89% 0.10 155);
  --color-success-300: oklch(78% 0.14 155);
  --color-success-400: oklch(67% 0.15 155);
  --color-success-500: var(--semantic-success-core);
  --color-success-600: oklch(52% 0.14 155);
  --color-success-700: oklch(44% 0.12 155);
  --color-success-800: oklch(36% 0.10 155);
  --color-success-900: oklch(28% 0.08 155);

  --color-warning-50: oklch(97% 0.035 55);
  --color-warning-100: oklch(94% 0.07 55);
  --color-warning-200: oklch(88% 0.12 55);
  --color-warning-300: oklch(78% 0.15 55);
  --color-warning-400: oklch(68% 0.17 55);
  --color-warning-500: var(--semantic-warning-core);
  --color-warning-600: oklch(54% 0.16 55);
  --color-warning-700: oklch(46% 0.14 55);
  --color-warning-800: oklch(38% 0.12 55);
  --color-warning-900: oklch(30% 0.10 55);

  --color-error-50: oklch(97% 0.035 25);
  --color-error-100: oklch(94% 0.07 25);
  --color-error-200: oklch(88% 0.10 25);
  --color-error-300: oklch(78% 0.14 25);
  --color-error-400: oklch(67% 0.16 25);
  --color-error-500: var(--semantic-error-core);
  --color-error-600: oklch(50% 0.17 25);
  --color-error-700: oklch(42% 0.15 25);
  --color-error-800: oklch(36% 0.12 25);
  --color-error-900: oklch(28% 0.10 25);

  --color-info-50: oklch(97% 0.03 210);
  --color-info-100: oklch(93% 0.06 210);
  --color-info-200: oklch(87% 0.10 210);
  --color-info-300: oklch(76% 0.14 210);
  --color-info-400: oklch(66% 0.16 210);
  --color-info-500: var(--semantic-info-core);
  --color-info-600: oklch(51% 0.10 210);
  --color-info-700: oklch(43% 0.09 210);
  --color-info-800: oklch(36% 0.08 210);
  --color-info-900: oklch(26% 0.06 210);

  /* ============================================
     ✨ PLAYFUL RESTRAINT - "The interface can smile"
     Subtle delights without clowning
     ============================================ */

  /* Interactive feedback */
  --hover-lift: translateY(-1px);
  --active-press: translateY(1px);
  --focus-glow-width: 3px;
  --focus-glow-opacity: 0.2;

  /* Component personality multipliers */
  --chroma-whisper: 0.27;   /* Badges - barely there */
  --chroma-speak: 0.40;      /* Alerts - clear but calm */
  --chroma-assert: 1.0;      /* Buttons - confident */

  /* ============================================
     📐 SYSTEMATIC RELATIONSHIPS - "Design is a promise"
     Consistent rules for predictable results
     ============================================ */

  /* Typography scale */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */

  /* Font weights - limited for clarity */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights - comfortable reading */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Shadows - subtle depth */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Border radius - friendly corners */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-base: 0.375rem; /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* Z-index layers - clear hierarchy */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Layout widths - maximize real estate, cap for ultra-wide */
  --max-width-ultrawide: 2400px;  /* Cap for 49"+ monitors */

  /* ============================================
     🏷️ BADGE TOKENS - "Whisper, don't shout"
     Derived with low chroma for subtlety
     ============================================ */

  /* Badge backgrounds - high lightness, low chroma */
  --color-badge-primary-bg: oklch(95% calc(var(--brand-chroma) * 0.67) var(--brand-hue));
  --color-badge-success-bg: oklch(96% calc(var(--semantic-success-chroma) * var(--chroma-whisper)) var(--semantic-success-hue));
  --color-badge-warning-bg: oklch(97% calc(var(--semantic-warning-chroma) * var(--chroma-whisper)) var(--semantic-warning-hue));
  --color-badge-error-bg: oklch(96% calc(var(--semantic-error-chroma) * var(--chroma-whisper)) var(--semantic-error-hue));
  --color-badge-info-bg: oklch(96% calc(var(--semantic-info-chroma) * var(--chroma-whisper)) var(--semantic-info-hue));
  --color-badge-neutral-bg: oklch(97% 0.02 270);

  /* Badge text - darker with moderate chroma */
  --color-badge-primary-text: oklch(38% var(--brand-chroma) var(--brand-hue));
  --color-badge-success-text: oklch(42% calc(var(--semantic-success-chroma) * 0.87) var(--semantic-success-hue));
  --color-badge-warning-text: oklch(43% calc(var(--semantic-warning-chroma) * 0.82) var(--semantic-warning-hue));
  --color-badge-error-text: oklch(45% calc(var(--semantic-error-chroma) * 0.74) var(--semantic-error-hue));
  --color-badge-info-text: oklch(43% calc(var(--semantic-info-chroma) * 0.69) var(--semantic-info-hue));
  --color-badge-neutral-text: oklch(38% 0.02 270);

  /* Badge rings - subtle definition */
  --color-badge-primary-ring: oklch(72% calc(var(--brand-chroma) * 0.83) var(--brand-hue));
  --color-badge-success-ring: oklch(75% calc(var(--semantic-success-chroma) * 0.47) var(--semantic-success-hue));
  --color-badge-warning-ring: oklch(75% calc(var(--semantic-warning-chroma) * 0.53) var(--semantic-warning-hue));
  --color-badge-error-ring: oklch(72% calc(var(--semantic-error-chroma) * 0.47) var(--semantic-error-hue));
  --color-badge-info-ring: oklch(72% calc(var(--semantic-info-chroma) * 0.50) var(--semantic-info-hue));
  --color-badge-neutral-ring: oklch(75% 0.02 270);
}

/* ============================================
   🌞 LIGHT MODE - "Calm minds under pressure"
   Clean, breathable, professional
   ============================================ */

:root {
  /* Surfaces - Light and breathable */
  --color-background: oklch(98% 0 0);       /* Neutral grey background */
  --color-surface: oklch(100% 0 0);         /* Pure white */
  --color-surface-hover: oklch(99% 0 0);    /* Subtle hover without tint */
  --color-surface-active: oklch(98% 0 0);   /* Pressed state, neutral */
  --color-surface-muted: oklch(96% 0 0);    /* Muted surface, no tint */
  --color-surface-subtle: oklch(97.5% 0 0); /* Barely-there surface tint */

  /* Text - Clear hierarchy without harshness */
  --color-text-primary: oklch(25% 0.02 220);
  --color-text-secondary: oklch(40% 0.02 220);
  --color-text-tertiary: oklch(55% 0.02 220);
  --color-text-disabled: oklch(70% 0.01 220);

  /* Borders - Subtle definition */
  --color-border: oklch(85% 0.02 220);
  --color-border-hover: oklch(75% 0.03 220);
  --color-border-focus: var(--brand-primary);
  --color-divider: oklch(90% 0.01 220);

  /* Links - Confident but not aggressive */
  --color-link: oklch(48% 0.10 200);
  --color-link-hover: oklch(42% 0.12 200);
  --color-link-visited: oklch(45% 0.08 280);

  /* Buttons - Primary */
  --color-button-primary-bg: var(--brand-primary);
  --color-button-primary-bg-hover: oklch(47% 0.06 220);
  --color-button-primary-bg-active: oklch(42% 0.06 220);
  --color-button-primary-text: oklch(97% 0 0);
  --color-button-primary-border: transparent;

  /* Buttons - Secondary (dark button style in light mode) */
  --color-button-secondary-bg: oklch(28% 0.02 220);
  --color-button-secondary-bg-hover: oklch(32% 0.025 220);
  --color-button-secondary-bg-active: oklch(36% 0.03 220);
  --color-button-secondary-text: oklch(95% 0 0);  /* Light text for dark background */
  --color-button-secondary-border: transparent;

  /* Alerts - "Speak softly" with medium chroma */
  --color-alert-success-bg: oklch(93% calc(var(--semantic-success-chroma) * var(--chroma-speak)) var(--semantic-success-hue));
  --color-alert-success-border: oklch(82% calc(var(--semantic-success-chroma) * 0.53) var(--semantic-success-hue));
  --color-alert-warning-bg: oklch(93% calc(var(--semantic-warning-chroma) * var(--chroma-speak)) var(--semantic-warning-hue));
  --color-alert-warning-border: oklch(82% calc(var(--semantic-warning-chroma) * 0.53) var(--semantic-warning-hue));
  --color-alert-error-bg: oklch(92% calc(var(--semantic-error-chroma) * 0.37) var(--semantic-error-hue));
  --color-alert-error-border: oklch(81% calc(var(--semantic-error-chroma) * 0.47) var(--semantic-error-hue));
  --color-alert-info-bg: oklch(93% calc(var(--semantic-info-chroma) * 0.31) var(--semantic-info-hue));
  --color-alert-info-border: oklch(82% calc(var(--semantic-info-chroma) * 0.44) var(--semantic-info-hue));

  /* Data Visualization - Full semantic colors */
  --color-viz-primary: var(--semantic-info-core);
  --color-viz-success: var(--semantic-success-core);
  --color-viz-warning: var(--semantic-warning-core);
  --color-viz-error: var(--semantic-error-core);
  --color-viz-accent: var(--brand-accent);

  /* Focus states - Visible but polite */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--brand-primary);
}

/* ============================================
   🌚 DARK MODE - "Equal citizen, not inverted"
   Warm, lifted, glowing
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces - Deep with subtle warmth */
    --color-background: oklch(18% 0 0);       /* Dark neutral background */
    --color-surface: oklch(22% 0 0);          /* Lifted surface */
    --color-surface-hover: oklch(24% 0 0);    /* Hover state */
    --color-surface-active: oklch(26% 0 0);   /* Active state */
    --color-surface-muted: oklch(20% 0 0);    /* Muted surface */
    --color-surface-subtle: oklch(21% 0 0);  /* Barely-there surface tint */

    /* Text - Soft light without glare */
    --color-text-primary: oklch(92% 0.015 220);
    --color-text-secondary: oklch(80% 0.015 220);
    --color-text-tertiary: oklch(65% 0.015 220);
    --color-text-disabled: oklch(45% 0.01 220);

    /* Borders - Subtle in dark */
    --color-border: oklch(35% 0.02 220);
    --color-border-hover: oklch(45% 0.025 220);
    --color-border-focus: oklch(65% 0.08 220);
    --color-divider: oklch(30% 0.015 220);

    /* Links - Lifted and friendly */
    --color-link: oklch(75% 0.08 200);
    --color-link-hover: oklch(80% 0.10 200);
    --color-link-visited: oklch(70% 0.06 280);

    /* Buttons - Primary (lifted from surface) */
    --color-button-primary-bg: oklch(47% 0.06 220);
    --color-button-primary-bg-hover: oklch(52% 0.07 220);
    --color-button-primary-bg-active: oklch(57% 0.08 220);
    --color-button-primary-text: oklch(95% 0 0);
    --color-button-primary-border: transparent;

    /* Buttons - Secondary (light button style in dark mode) */
    --color-button-secondary-bg: oklch(35% 0.02 220);
    --color-button-secondary-bg-hover: oklch(40% 0.025 220);
    --color-button-secondary-bg-active: oklch(45% 0.03 220);
    --color-button-secondary-text: oklch(95% 0 0);  /* Keep light text */
    --color-button-secondary-border: transparent;

    /* Alerts - Lifted with gentle glow */
    --color-alert-success-bg: oklch(32% calc(var(--semantic-success-chroma) * 0.53) var(--semantic-success-hue));
    --color-alert-success-border: oklch(44% calc(var(--semantic-success-chroma) * 0.67) var(--semantic-success-hue));
    --color-alert-warning-bg: oklch(32% calc(var(--semantic-warning-chroma) * 0.53) var(--semantic-warning-hue));
    --color-alert-warning-border: oklch(44% calc(var(--semantic-warning-chroma) * 0.65) var(--semantic-warning-hue));
    --color-alert-error-bg: oklch(30% calc(var(--semantic-error-chroma) * 0.47) var(--semantic-error-hue));
    --color-alert-error-border: oklch(42% calc(var(--semantic-error-chroma) * 0.58) var(--semantic-error-hue));
    --color-alert-info-bg: oklch(31% calc(var(--semantic-info-chroma) * 0.44) var(--semantic-info-hue));
    --color-alert-info-border: oklch(43% calc(var(--semantic-info-chroma) * 0.56) var(--semantic-info-hue));

    /* Accent - Lifted for dark backgrounds */
    --color-accent: oklch(68% 0.13 220);
    --color-accent-dark: oklch(58% 0.13 220);
    --color-accent-emphasis: oklch(73% 0.15 220);
    --color-accent-subtle: oklch(25% 0.06 220);
    --color-accent-primary: oklch(68% 0.13 220);
    --color-accent-500: oklch(68% 0.13 220);

    /* Data Visualization - Lifted for visibility
       Target: ~5:1 contrast vs dark background for parity across semantic colors
       Primary: 68% → 6.74:1 ✓
       Success: 66% → 6.46:1 ✓
       Warning: 68% → 6.18:1 ✓
       Error:   65% → 4.91:1 ✓ (lifted from 63% for parity)
       Accent:  70% → 7.31:1 ✓ */
    --color-viz-primary: oklch(68% 0.10 210);
    --color-viz-success: oklch(66% 0.15 155);
    --color-viz-warning: oklch(68% 0.17 55);
    --color-viz-error: oklch(65% 0.19 25);
    --color-viz-accent: oklch(70% 0.06 220);
  }
}

/* Manual theme toggle using data attributes */
[data-theme="light"] {
  /* Copy all light mode values here for manual override */
  --color-background: oklch(98% 0 0);
  --color-surface: oklch(100% 0 0);
  --color-surface-hover: oklch(99% 0 0);
  --color-surface-active: oklch(98% 0 0);
  --color-surface-muted: oklch(96% 0 0);
  --color-surface-subtle: oklch(97.5% 0 0);
  --color-text-primary: oklch(25% 0.02 220);
  --color-text-secondary: oklch(40% 0.02 220);
  --color-text-tertiary: oklch(55% 0.02 220);
  --color-text-disabled: oklch(70% 0.01 220);
  --color-border: oklch(85% 0.02 220);
  --color-border-hover: oklch(75% 0.03 220);
  --color-border-focus: var(--brand-primary);
  --color-divider: oklch(90% 0.01 220);
}

[data-theme="dark"] {
  /* Copy all dark mode values here for manual override */
  --color-background: oklch(18% 0 0);
  --color-surface: oklch(22% 0 0);
  --color-surface-hover: oklch(24% 0 0);
  --color-surface-active: oklch(26% 0 0);
  --color-surface-muted: oklch(20% 0 0);
  --color-surface-subtle: oklch(21% 0 0);
  --color-text-primary: oklch(92% 0.015 220);
  --color-text-secondary: oklch(80% 0.015 220);
  --color-text-tertiary: oklch(65% 0.015 220);
  --color-text-disabled: oklch(45% 0.01 220);
  --color-border: oklch(35% 0.02 220);
  --color-border-hover: oklch(45% 0.025 220);
  --color-border-focus: oklch(65% 0.08 220);
  --color-divider: oklch(30% 0.015 220);

  /* Accent - Lifted for dark backgrounds */
  --color-accent: oklch(70% 0.06 220);
  --color-accent-dark: oklch(60% 0.06 220);
  --color-accent-emphasis: oklch(75% 0.07 220);
  --color-accent-subtle: oklch(25% 0.03 220);
  --color-accent-primary: oklch(70% 0.06 220);
  --color-accent-500: oklch(70% 0.06 220);

  /* Dark mode specific badge adjustments */
  --color-badge-success-bg: oklch(28% calc(var(--semantic-success-chroma) * 0.4) var(--semantic-success-hue));
  --color-badge-warning-bg: oklch(29% calc(var(--semantic-warning-chroma) * 0.41) var(--semantic-warning-hue));
  --color-badge-error-bg: oklch(28% calc(var(--semantic-error-chroma) * 0.37) var(--semantic-error-hue));
  --color-badge-info-bg: oklch(29% calc(var(--semantic-info-chroma) * 0.38) var(--semantic-info-hue));
  --color-badge-success-text: oklch(72% calc(var(--semantic-success-chroma) * 0.53) var(--semantic-success-hue));
  --color-badge-warning-text: oklch(74% calc(var(--semantic-warning-chroma) * 0.53) var(--semantic-warning-hue));
  --color-badge-error-text: oklch(71% calc(var(--semantic-error-chroma) * 0.47) var(--semantic-error-hue));
  --color-badge-info-text: oklch(70% calc(var(--semantic-info-chroma) * 0.44) var(--semantic-info-hue));
}

/* ============================================
   🎭 TRANSITIONS - "Software should have manners"
   Polite, smooth state changes
   ============================================ */

.cp-theme-transition,
.cp-theme-transition * {
  transition: background-color var(--motion-gentle) var(--ease-natural),
              border-color var(--motion-gentle) var(--ease-natural),
              color var(--motion-gentle) var(--ease-natural);
}

/* ============================================
   ♿ REDUCED MOTION - "Respect user preferences"
   For users with vestibular disorders or motion sensitivity
   WCAG 2.1 Success Criterion 2.3.3 (AAA)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}