/*
  tokens.css — design tokens (colour, space, type, radius, elevation, motion).
  Edit this file to change how the app looks. app.css should not need to
  change once a component is built against these custom properties.

  Manual theme toggle: :root supplies the light palette by default, the
  prefers-color-scheme media query supplies the dark palette when the OS
  prefers dark, and :root[data-theme="dark"] / :root[data-theme="light"]
  (set by base.html's inline script + the menu-sheet toggle) win over the
  media query in *both* directions because CSS resolves this per property,
  not per block.
*/

:root {
  /* Space: 4 / 8 / 12 / 16 / 24 / 32 / 48px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Type */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation (light) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.18);

  /* Motion */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* Layout */
  --content-max: 1200px;
  --tap-min: 44px;
  --font-size-base: 17px;

  /* Colour: neutral surface, one accent (light palette) */
  --bg: #f7f6f4;
  --surface: #ffffff;
  --surface-sunken: #eeece7;
  --text: #1c1c1c;
  --text-muted: #5a5a5a;
  --text-faint: #8a8a8a;
  --border: #d9d6d1;
  --border-strong: #b9b5ae;
  --accent: #2f6690;
  --accent-hover: #24506f;
  --accent-contrast: #ffffff;
  --accent-soft: #e4edf3;
  --focus-ring: #2f6690;
  --tile-bg: #e7e5e2;
  --video-glyph: #6b6b6b;

  /* Semantic message colours: success / info / warning / error */
  --success-bg: #e6f4ea;
  --success-border: #2e7d32;
  --success-text: #1e4620;
  --info-bg: #e8f0fe;
  --info-border: #1967d2;
  --info-text: #174ea6;
  --warning-bg: #fff4e5;
  --warning-border: #b25e09;
  --warning-text: #7a3e00;
  --error-bg: #fdecea;
  --error-border: #b3261e;
  --error-text: #7a1712;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-sm: 0 0 0 1px var(--border);
    --shadow: 0 0 0 1px var(--border), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 0 0 1px var(--border), 0 8px 24px rgba(0, 0, 0, 0.45);

    --bg: #16171a;
    --surface: #1f2023;
    --surface-sunken: #111214;
    --text: #edecea;
    --text-muted: #a9a9a9;
    --text-faint: #74757a;
    --border: #3a3b3e;
    --border-strong: #55565b;
    --accent: #7db8e8;
    --accent-hover: #9fcdf0;
    --accent-contrast: #0b1720;
    --accent-soft: #223342;
    --focus-ring: #7db8e8;
    --tile-bg: #2a2b2e;
    --video-glyph: #b7b7b7;

    --success-bg: #1f3324;
    --success-border: #66bb6a;
    --success-text: #a5d6a7;
    --info-bg: #1a2a3a;
    --info-border: #8ab4f8;
    --info-text: #aecbfa;
    --warning-bg: #3a2c12;
    --warning-border: #ffb74d;
    --warning-text: #ffcc80;
    --error-bg: #3a1f1d;
    --error-border: #ff8a80;
    --error-text: #ffb4ab;
  }
}

/* Manual toggle — overrides the media query above in *both* directions. */
:root[data-theme="dark"] {
  --shadow-sm: 0 0 0 1px var(--border);
  --shadow: 0 0 0 1px var(--border), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 0 0 1px var(--border), 0 8px 24px rgba(0, 0, 0, 0.45);
  --bg: #16171a;
  --surface: #1f2023;
  --surface-sunken: #111214;
  --text: #edecea;
  --text-muted: #a9a9a9;
  --text-faint: #74757a;
  --border: #3a3b3e;
  --border-strong: #55565b;
  --accent: #7db8e8;
  --accent-hover: #9fcdf0;
  --accent-contrast: #0b1720;
  --accent-soft: #223342;
  --focus-ring: #7db8e8;
  --tile-bg: #2a2b2e;
  --video-glyph: #b7b7b7;
  --success-bg: #1f3324;
  --success-border: #66bb6a;
  --success-text: #a5d6a7;
  --info-bg: #1a2a3a;
  --info-border: #8ab4f8;
  --info-text: #aecbfa;
  --warning-bg: #3a2c12;
  --warning-border: #ffb74d;
  --warning-text: #ffcc80;
  --error-bg: #3a1f1d;
  --error-border: #ff8a80;
  --error-text: #ffb4ab;
}

:root[data-theme="light"] {
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.18);
  --bg: #f7f6f4;
  --surface: #ffffff;
  --surface-sunken: #eeece7;
  --text: #1c1c1c;
  --text-muted: #5a5a5a;
  --text-faint: #8a8a8a;
  --border: #d9d6d1;
  --border-strong: #b9b5ae;
  --accent: #2f6690;
  --accent-hover: #24506f;
  --accent-contrast: #ffffff;
  --accent-soft: #e4edf3;
  --focus-ring: #2f6690;
  --tile-bg: #e7e5e2;
  --video-glyph: #6b6b6b;
  --success-bg: #e6f4ea;
  --success-border: #2e7d32;
  --success-text: #1e4620;
  --info-bg: #e8f0fe;
  --info-border: #1967d2;
  --info-text: #174ea6;
  --warning-bg: #fff4e5;
  --warning-border: #b25e09;
  --warning-text: #7a3e00;
  --error-bg: #fdecea;
  --error-border: #b3261e;
  --error-text: #7a1712;
}