/*
 * Cycle Lounge semantic foundation — production compatibility layer.
 *
 * Architecture: reference values -> semantic roles -> legacy aliases in app.css.
 * Only this file defines new colour values. Route and component styles consume
 * semantic roles (directly or through an existing compatibility alias).
 */

:root {
  color-scheme: light;

  /* Reference palette. */
  --ref-white: #FFFFFF;
  --ref-neutral-25: #FAFAF7;
  --ref-neutral-100: #ECEAE3;
  --ref-neutral-200: #DDDAD1;
  --ref-neutral-300: #C7C3B8;
  --ref-neutral-400: #A6A398;
  --ref-neutral-450: #8A8F86;
  --ref-neutral-500: #72736A;
  --ref-neutral-600: #5C5E56;
  --ref-neutral-700: #3C3F39;
  --ref-neutral-800: #292C28;
  --ref-neutral-900: #171A17;

  --ref-porcelain-25: #FAFBF8;
  --ref-porcelain-50: #F1F3EE;
  --ref-porcelain-100: #E9EDE6;
  --ref-porcelain-200: #D9DDD5;
  --ref-porcelain-300: #C6CCC1;

  --ref-gold-25: #FFF9E7;
  --ref-gold-50: #FFF8DE;
  --ref-gold-100: #FFF0B8;
  --ref-gold-400: #C9A100;
  --ref-gold-500: #B58E00;
  --ref-gold-600: #A67A00;
  --ref-gold-700: #6E5000;
  --ref-gold-900: #251B00;

  --ref-green-50: #ECF8F0;
  --ref-green-400: #54B77A;
  --ref-green-600: #237548;
  --ref-green-700: #155A37;
  --ref-green-900: #11301F;

  --ref-blue-50: #EFF5FF;
  --ref-blue-400: #72A8F3;
  --ref-blue-700: #264578;
  --ref-blue-900: #172A44;

  --ref-orange-50: #FFF3E7;
  --ref-orange-400: #EC9A4B;
  --ref-orange-700: #6E3E00;
  --ref-orange-900: #3A2513;

  --ref-red-50: #FDEEEE;
  --ref-red-400: #E8736C;
  --ref-red-700: #7F2016;
  --ref-red-900: #3D1C1A;

  /* Existing Cycle Lounge category fills, retained behind semantic roles. */
  --ref-road-fill: #B36B00;
  --ref-signal-fill: #7C6A20;
  --ref-signal-text: #52450F;
  --ref-success-fill: #2F8F5B;
  --ref-success-text: #135232;
  --ref-danger-fill: #A93226;

  /* The certified Phase 0 dark palette remains exact. */
  --ref-dark-canvas: #0E0F10;
  --ref-dark-surface-1: #17191A;
  --ref-dark-surface-2: #1F2123;
  --ref-dark-surface-3: #282A2C;
  --ref-dark-border: #3A3D40;
  --ref-dark-text: #EDEEEA;
  --ref-dark-text-muted: #A2A49D;
  --ref-dark-gold: #E8BC2A;
  --ref-dark-orange: #E0952F;
  --ref-dark-signal: #C9B255;
  --ref-dark-green: #4CBE80;
  --ref-dark-red: #E5675A;
  --ref-dark-blue: #8FB4FF;

  --ref-shadow-soft: 0 1px 2px rgba(13, 15, 14, 0.06), 0 12px 30px rgba(13, 15, 14, 0.08);
  --ref-shadow-raised: 0 2px 6px rgba(13, 15, 14, 0.09), 0 22px 48px rgba(13, 15, 14, 0.13);
  --ref-shadow-dark: 0 1px 2px rgba(0, 0, 0, 0.34), 0 18px 44px rgba(0, 0, 0, 0.30);

  /* Shared non-colour roles. */
  --font-display: 'Oswald', 'Noto Sans Tamil', sans-serif;
  --font-body: 'Inter', 'Noto Sans Tamil', sans-serif;
  --font-mono: 'JetBrains Mono', 'Noto Sans Tamil', monospace;
  --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;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-round: 999px;
  --size-target: 44px;
  --size-control: 48px;
  --duration-fast: 120ms;
  --duration-standard: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
}

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --color-canvas: var(--ref-porcelain-50);
  --color-canvas-brand: var(--ref-gold-25);
  --color-surface-1: var(--ref-white);
  --color-surface-2: var(--ref-porcelain-25);
  --color-surface-3: var(--ref-porcelain-100);
  --color-surface-inverse: var(--ref-neutral-900);
  --color-emphasis-surface: var(--ref-neutral-900);
  --color-emphasis-surface-raised: var(--ref-neutral-800);
  --color-on-emphasis: var(--ref-neutral-25);
  --color-on-emphasis-muted: var(--ref-neutral-300);
  --color-emphasis-border: var(--ref-neutral-700);
  --color-overlay: rgba(13, 15, 14, 0.64);
  --shadow-surface: var(--ref-shadow-soft);
  --shadow-raised: var(--ref-shadow-raised);
  --shadow-card: var(--ref-shadow-soft);

  --color-text-primary: var(--ref-neutral-900);
  --color-text-secondary: var(--ref-neutral-600);
  --color-text-muted: var(--ref-neutral-500);
  --color-text-inverse: var(--ref-neutral-25);
  --color-icon-primary: var(--ref-neutral-700);
  --color-icon-muted: var(--ref-neutral-500);

  --color-border-subtle: var(--ref-porcelain-200);
  --color-border-default: var(--ref-porcelain-300);
  --color-border-strong: var(--ref-neutral-500);
  --color-control-border: var(--ref-neutral-450);

  --color-accent: var(--ref-gold-400);
  --color-accent-hover: var(--ref-gold-500);
  --color-accent-pressed: var(--ref-gold-600);
  --color-on-accent: var(--ref-gold-900);
  --color-accent-text: var(--ref-gold-700);
  --color-focus: var(--ref-gold-700);
  --color-selection: var(--ref-gold-100);
  --color-selected-surface: var(--ref-gold-50);
  --color-selected-border: var(--ref-gold-600);
  --color-interaction-hover: var(--ref-porcelain-100);
  --color-interaction-pressed: var(--ref-porcelain-200);
  --color-disabled-surface: var(--ref-porcelain-100);
  --color-disabled-text: var(--ref-neutral-500);

  --color-success-surface: var(--ref-green-50);
  --color-success-border: var(--ref-green-400);
  --color-success-text: var(--ref-green-700);
  --color-info-surface: var(--ref-blue-50);
  --color-info-border: var(--ref-blue-400);
  --color-info-text: var(--ref-blue-700);
  --color-warning-surface: var(--ref-orange-50);
  --color-warning-border: var(--ref-orange-400);
  --color-warning-text: var(--ref-orange-700);
  --color-danger-surface: var(--ref-red-50);
  --color-danger-border: var(--ref-red-400);
  --color-danger-text: var(--ref-red-700);

  --color-category-road-surface: var(--ref-orange-50);
  --color-category-road-fill: var(--ref-road-fill);
  --color-category-road-text: var(--ref-orange-700);
  --color-category-community-surface: var(--ref-green-50);
  --color-category-community-fill: var(--ref-success-fill);
  --color-category-community-text: var(--ref-green-700);
  --color-category-night-surface: var(--ref-blue-50);
  --color-category-night-text: var(--ref-blue-700);
  --color-category-signal-fill: var(--ref-signal-fill);
  --color-category-signal-surface: rgba(124, 106, 32, 0.16);
  --color-category-signal-text: var(--ref-signal-text);
  --color-success-fill: var(--ref-success-fill);
  --color-success-legacy-text: var(--ref-success-text);
  --color-danger-fill: var(--ref-danger-fill);

  --color-shell-surface: rgba(255, 255, 255, 0.94);
  --color-shell-text: var(--color-text-primary);
  --color-shell-text-muted: var(--color-text-secondary);
  --color-shell-border: var(--color-border-subtle);
  --color-shell-control: var(--color-surface-2);
  --color-shell-control-border: var(--color-control-border);
  --shadow-shell: var(--ref-shadow-soft);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas: var(--ref-dark-canvas);
  --color-canvas-brand: var(--ref-dark-canvas);
  --color-surface-1: var(--ref-dark-surface-1);
  --color-surface-2: var(--ref-dark-surface-2);
  --color-surface-3: var(--ref-dark-surface-3);
  --color-surface-inverse: var(--ref-neutral-25);
  --color-emphasis-surface: var(--ref-dark-surface-2);
  --color-emphasis-surface-raised: var(--ref-dark-surface-3);
  --color-on-emphasis: var(--ref-dark-text);
  --color-on-emphasis-muted: var(--ref-dark-text-muted);
  --color-emphasis-border: var(--ref-dark-border);
  --color-overlay: rgba(0, 0, 0, 0.66);
  --shadow-surface: var(--ref-shadow-dark);
  --shadow-raised: var(--ref-shadow-dark);
  --shadow-card: none;

  --color-text-primary: var(--ref-dark-text);
  --color-text-secondary: var(--ref-dark-text-muted);
  --color-text-muted: var(--ref-dark-text-muted);
  --color-text-inverse: var(--ref-neutral-900);
  --color-icon-primary: var(--ref-dark-text);
  --color-icon-muted: var(--ref-dark-text-muted);

  --color-border-subtle: var(--ref-dark-border);
  --color-border-default: var(--ref-dark-border);
  --color-border-strong: var(--ref-neutral-500);
  --color-control-border: var(--ref-neutral-500);

  --color-accent: var(--ref-dark-gold);
  --color-accent-hover: var(--ref-gold-100);
  --color-accent-pressed: var(--ref-gold-400);
  --color-on-accent: var(--ref-gold-900);
  --color-accent-text: var(--ref-dark-gold);
  --color-focus: var(--ref-gold-100);
  --color-selection: rgba(232, 188, 42, 0.28);
  --color-selected-surface: rgba(232, 188, 42, 0.16);
  --color-selected-border: var(--ref-dark-gold);
  --color-interaction-hover: var(--ref-dark-surface-3);
  --color-interaction-pressed: var(--ref-dark-border);
  --color-disabled-surface: var(--ref-dark-surface-2);
  --color-disabled-text: var(--ref-neutral-500);

  --color-success-surface: var(--ref-green-900);
  --color-success-border: var(--ref-dark-green);
  --color-success-text: var(--ref-dark-green);
  --color-info-surface: var(--ref-blue-900);
  --color-info-border: var(--ref-dark-blue);
  --color-info-text: var(--ref-dark-blue);
  --color-warning-surface: var(--ref-orange-900);
  --color-warning-border: var(--ref-dark-orange);
  --color-warning-text: var(--ref-dark-orange);
  --color-danger-surface: var(--ref-red-900);
  --color-danger-border: var(--ref-dark-red);
  --color-danger-text: var(--ref-dark-red);

  --color-category-road-surface: var(--ref-orange-900);
  --color-category-road-fill: var(--ref-dark-orange);
  --color-category-road-text: var(--ref-dark-orange);
  --color-category-community-surface: var(--ref-green-900);
  --color-category-community-fill: var(--ref-dark-green);
  --color-category-community-text: var(--ref-dark-green);
  --color-category-night-surface: var(--ref-blue-900);
  --color-category-night-text: var(--ref-dark-blue);
  --color-category-signal-fill: var(--ref-dark-signal);
  --color-category-signal-surface: rgba(201, 178, 85, 0.15);
  --color-category-signal-text: var(--ref-dark-signal);
  --color-success-fill: var(--ref-dark-green);
  --color-success-legacy-text: var(--ref-dark-green);
  --color-danger-fill: var(--ref-dark-red);

  --color-shell-surface: rgba(8, 9, 10, 0.86);
  --color-shell-text: #F2F3EF;
  --color-shell-text-muted: #B9BBB4;
  --color-shell-border: var(--ref-dark-border);
  --color-shell-control: var(--ref-dark-surface-2);
  --color-shell-control-border: var(--ref-dark-border);
  --shadow-shell: var(--ref-shadow-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --color-canvas: var(--ref-dark-canvas);
    --color-canvas-brand: var(--ref-dark-canvas);
    --color-surface-1: var(--ref-dark-surface-1);
    --color-surface-2: var(--ref-dark-surface-2);
    --color-surface-3: var(--ref-dark-surface-3);
    --color-surface-inverse: var(--ref-neutral-25);
    --color-emphasis-surface: var(--ref-dark-surface-2);
    --color-emphasis-surface-raised: var(--ref-dark-surface-3);
    --color-on-emphasis: var(--ref-dark-text);
    --color-on-emphasis-muted: var(--ref-dark-text-muted);
    --color-emphasis-border: var(--ref-dark-border);
    --color-overlay: rgba(0, 0, 0, 0.66);
    --shadow-surface: var(--ref-shadow-dark);
    --shadow-raised: var(--ref-shadow-dark);
    --shadow-card: none;
    --color-text-primary: var(--ref-dark-text);
    --color-text-secondary: var(--ref-dark-text-muted);
    --color-text-muted: var(--ref-dark-text-muted);
    --color-text-inverse: var(--ref-neutral-900);
    --color-icon-primary: var(--ref-dark-text);
    --color-icon-muted: var(--ref-dark-text-muted);
    --color-border-subtle: var(--ref-dark-border);
    --color-border-default: var(--ref-dark-border);
    --color-border-strong: var(--ref-neutral-500);
    --color-control-border: var(--ref-neutral-500);
    --color-accent: var(--ref-dark-gold);
    --color-accent-hover: var(--ref-gold-100);
    --color-accent-pressed: var(--ref-gold-400);
    --color-on-accent: var(--ref-gold-900);
    --color-accent-text: var(--ref-dark-gold);
    --color-focus: var(--ref-gold-100);
    --color-selection: rgba(232, 188, 42, 0.28);
    --color-selected-surface: rgba(232, 188, 42, 0.16);
    --color-selected-border: var(--ref-dark-gold);
    --color-interaction-hover: var(--ref-dark-surface-3);
    --color-interaction-pressed: var(--ref-dark-border);
    --color-disabled-surface: var(--ref-dark-surface-2);
    --color-disabled-text: var(--ref-neutral-500);
    --color-success-surface: var(--ref-green-900);
    --color-success-border: var(--ref-dark-green);
    --color-success-text: var(--ref-dark-green);
    --color-info-surface: var(--ref-blue-900);
    --color-info-border: var(--ref-dark-blue);
    --color-info-text: var(--ref-dark-blue);
    --color-warning-surface: var(--ref-orange-900);
    --color-warning-border: var(--ref-dark-orange);
    --color-warning-text: var(--ref-dark-orange);
    --color-danger-surface: var(--ref-red-900);
    --color-danger-border: var(--ref-dark-red);
    --color-danger-text: var(--ref-dark-red);
    --color-category-road-surface: var(--ref-orange-900);
    --color-category-road-fill: var(--ref-dark-orange);
    --color-category-road-text: var(--ref-dark-orange);
    --color-category-community-surface: var(--ref-green-900);
    --color-category-community-fill: var(--ref-dark-green);
    --color-category-community-text: var(--ref-dark-green);
    --color-category-night-surface: var(--ref-blue-900);
    --color-category-night-text: var(--ref-dark-blue);
    --color-category-signal-fill: var(--ref-dark-signal);
    --color-category-signal-surface: rgba(201, 178, 85, 0.15);
    --color-category-signal-text: var(--ref-dark-signal);
    --color-success-fill: var(--ref-dark-green);
    --color-success-legacy-text: var(--ref-dark-green);
    --color-danger-fill: var(--ref-dark-red);
    --color-shell-surface: rgba(8, 9, 10, 0.86);
    --color-shell-text: #F2F3EF;
    --color-shell-text-muted: #B9BBB4;
    --color-shell-border: var(--ref-dark-border);
    --color-shell-control: var(--ref-dark-surface-2);
    --color-shell-control-border: var(--ref-dark-border);
    --shadow-shell: var(--ref-shadow-dark);
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-text-secondary: var(--color-text-primary);
    --color-text-muted: var(--color-text-primary);
    --color-border-subtle: var(--color-border-strong);
    --color-shell-border: var(--color-border-strong);
  }
}

@media (forced-colors: active) {
  :root {
    --shadow-surface: none;
    --shadow-raised: none;
    --shadow-card: none;
    --shadow-shell: none;
  }
}