@import url('./themes/light.css');
@import url('./themes/dark.css');

:root {
  color-scheme: light;
  --ll-bg: var(--ll-bg-base);
  --ll-surface: var(--ll-card-bg);
  --ll-surface-soft: var(--ll-bg-surface-soft);
  --ll-text: var(--ll-fg-primary);
  --ll-muted: var(--ll-fg-muted);
  --ll-primary-brand: var(--ll-brand-navy);
  --ll-primary: var(--ll-button-primary-bg);
  --ll-primary-contrast: var(--ll-button-primary-fg);
  --ll-secondary-brand: var(--ll-brand-teal);
  --ll-accent: var(--ll-brand-gold);
  --ll-border: var(--ll-card-border);
  --ll-shadow: var(--ll-card-shadow);
  --ll-focus: var(--ll-focus-ring);
  --ll-font-scale: 1;
  --ll-font-weight: 450;
  --ll-line-height: 1.5;
  --ll-motion-duration: 260ms;
  --ll-touch-target: 48px;
}

:root[data-colour-scheme="legend"] {
  color-scheme: light;
}

:root[data-colour-scheme="dark"] {
  color-scheme: dark;
  --ll-bg: var(--ll-bg-base);
  --ll-surface: var(--ll-card-bg);
  --ll-surface-soft: var(--ll-bg-surface-soft);
  --ll-text: var(--ll-fg-primary);
  --ll-muted: var(--ll-fg-muted);
  --ll-primary-brand: var(--ll-brand-navy);
  --ll-primary: var(--ll-button-secondary-bg);
  --ll-primary-contrast: var(--ll-button-secondary-fg);
  --ll-secondary-brand: var(--ll-brand-teal);
  --ll-accent: var(--ll-brand-gold);
  --ll-border: var(--ll-card-border);
  --ll-shadow: var(--ll-card-shadow);
}

:root[data-colour-scheme="arcade"] {
  color-scheme: dark;
  --ll-bg: #09051f;
  --ll-surface: #151036;
  --ll-surface-soft: #21154f;
  --ll-text: #f7f3ff;
  --ll-muted: #c4b7ff;
  --ll-primary-brand: #00f5ff;
  --ll-primary: #ff2bd6;
  --ll-primary-contrast: #09051f;
  --ll-secondary-brand: #00f5ff;
  --ll-accent: #ffe66d;
  --ll-border: #6f4dff;
  --ll-shadow: 0 0 0 1px rgba(0,245,255,.18), 0 18px 42px rgba(255,43,214,.2);
  --ll-focus: 0 0 0 4px rgba(0,245,255,.34);
  --ll-input-bg: #0d0929;
}

:root[data-colour-scheme="storybook"] {
  color-scheme: light;
  --ll-bg: #fff8eb;
  --ll-surface: #fffdf7;
  --ll-surface-soft: #f4ecd9;
  --ll-text: #24304f;
  --ll-muted: #71624e;
  --ll-primary-brand: #5d3f8f;
  --ll-primary: #6f4bb8;
  --ll-primary-contrast: #ffffff;
  --ll-secondary-brand: #2e9f8f;
  --ll-accent: #f0a93a;
  --ll-border: #e0cfad;
  --ll-shadow: 0 12px 28px rgba(92,63,143,.12);
  --ll-focus: 0 0 0 4px rgba(46,159,143,.25);
  --ll-input-bg: #fffaf0;
}

:root[data-colour-scheme="sunrise"] {
  color-scheme: light;
  --ll-bg: #fff4ee;
  --ll-surface: #ffffff;
  --ll-surface-soft: #ffe8dc;
  --ll-text: #3e2348;
  --ll-muted: #7a5a70;
  --ll-primary-brand: #7c3aed;
  --ll-primary: #e85d75;
  --ll-primary-contrast: #ffffff;
  --ll-secondary-brand: #ff8c42;
  --ll-accent: #ffd166;
  --ll-border: #f0c6b8;
  --ll-shadow: 0 14px 34px rgba(232,93,117,.14);
  --ll-focus: 0 0 0 4px rgba(255,140,66,.28);
  --ll-input-bg: #fffaf7;
}

:root[data-colour-scheme="midnight"] {
  color-scheme: dark;
  --ll-bg: #070b16;
  --ll-surface: #111827;
  --ll-surface-soft: #172033;
  --ll-text: #eef6ff;
  --ll-muted: #a9b9cf;
  --ll-primary-brand: #8bbdff;
  --ll-primary: #8bbdff;
  --ll-primary-contrast: #07111f;
  --ll-secondary-brand: #81e6d9;
  --ll-accent: #d8b4fe;
  --ll-border: #2a3952;
  --ll-shadow: 0 16px 38px rgba(0,0,0,.34);
  --ll-focus: 0 0 0 4px rgba(129,230,217,.3);
  --ll-input-bg: #0b1220;
}

:root[data-contrast-level="high"] {
  --ll-bg: #ffffff;
  --ll-surface: #ffffff;
  --ll-surface-soft: #ffffff;
  --ll-text: #000000;
  --ll-muted: #111111;
  --ll-primary: #000000;
  --ll-primary-contrast: #ffffff;
  --ll-secondary-brand: #005fcc;
  --ll-accent: #ffbf00;
  --ll-border: #000000;
  --ll-shadow: 0 0 0 2px #000000;
  --ll-focus: 0 0 0 4px #ffbf00;
}

:root[data-colour-scheme="dark"][data-contrast-level="high"],
:root[data-colour-scheme="arcade"][data-contrast-level="high"],
:root[data-colour-scheme="midnight"][data-contrast-level="high"] {
  --ll-bg: #000000;
  --ll-surface: #000000;
  --ll-surface-soft: #111111;
  --ll-text: #ffffff;
  --ll-muted: #ffffff;
  --ll-primary: #ffffff;
  --ll-primary-contrast: #000000;
  --ll-secondary-brand: #66ffff;
  --ll-accent: #ffdf4d;
  --ll-border: #ffffff;
  --ll-shadow: 0 0 0 2px #ffffff;
}

:root[data-font-size="large"] { --ll-font-scale: 1.12; }
:root[data-font-size="extra-large"] { --ll-font-scale: 1.25; }
:root[data-font-weight="strong"] { --ll-font-weight: 650; }
:root[data-line-spacing="wide"] { --ll-line-height: 1.85; }
:root[data-reduced-motion="true"] { --ll-motion-duration: 1ms; }
:root[data-touch-target-density="large"] { --ll-touch-target: 56px; }