/*
  Planet 9 Fitness design tokens — "Race Line Daylight" (A2).

  Light is the default because the gym itself is bright (light floor, bright
  lighting). Dark is a full second theme, picked by the visitor's system
  setting or the theme toggle (data-theme on <html>).

  Rules the tokens encode:
  - Brand yellow (#F3CC0B) and charcoal (#232323) are sampled from the logo.
  - Yellow is never text on a light surface (1.56:1 on white). On light it is a
    fill with --color-on-accent text; text-yellow uses --color-ink.
  - "Expiring" uses --color-warn (orange), never yellow, so warnings never read
    as branding.
  - Every text/background pair used by components is >= 4.5:1
    (enforced by tests/tokens.test.mjs).
*/

:root {
  /* Colour: light theme */
  --color-bg: #EDEDEB;
  --color-surface: #FFFFFF;
  --color-raised: #E2E2DF;
  --color-line: #D2D2CD;
  --color-fg: #161617;
  --color-muted: #5C5C58;
  --color-accent: #F3CC0B;
  --color-on-accent: #111111;
  --color-ink: #7A5F00;
  --color-bar: #161617;
  --color-on-bar: #F5F5F2;
  --color-bar-muted: #A3A3A0;
  --color-ok: #176B42;
  --color-warn: #9A4508;
  --color-bad: #AD282E;
  --color-charcoal: #232323;

  /* Which logo artwork shows in this theme */
  --show-on-light: block;
  --show-on-dark: none;

  /* Type */
  --font-display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(2.25rem, 6vw, 4.25rem);
  --text-3xl: clamp(2.75rem, 9vw, 6.5rem);

  /* Space (4 px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Shape: the slant comes from the angle of the 9 in the logo */
  --cut: 12px;
  --slant: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  --radius: 0;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration-slow: 600ms;

  --content-max: 72rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0B0B0C;
    --color-surface: #161617;
    --color-raised: #232323;
    --color-line: #2E2E30;
    --color-fg: #F5F5F2;
    --color-muted: #A3A3A0;
    --color-accent: #F3CC0B;
    --color-on-accent: #111111;
    --color-ink: #F3CC0B;
    --color-bar: #1C1C1E;
    --color-on-bar: #F5F5F2;
    --color-bar-muted: #A3A3A0;
    --color-ok: #3DD68C;
    --color-warn: #FF8B3E;
    --color-bad: #FF6369;
    --show-on-light: none;
    --show-on-dark: block;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #0B0B0C;
  --color-surface: #161617;
  --color-raised: #232323;
  --color-line: #2E2E30;
  --color-fg: #F5F5F2;
  --color-muted: #A3A3A0;
  --color-accent: #F3CC0B;
  --color-on-accent: #111111;
  --color-ink: #F3CC0B;
  --color-bar: #1C1C1E;
  --color-on-bar: #F5F5F2;
  --color-bar-muted: #A3A3A0;
  --color-ok: #3DD68C;
  --color-warn: #FF8B3E;
  --color-bad: #FF6369;
  --show-on-light: none;
  --show-on-dark: block;
  color-scheme: dark;
}