/* Varazza website tokens (SITE-5).
   Values match the app's Light and Dark themes (tracker/public/styles.css) and the
   Varazza design system, so the site and the product look like one thing.
   Light is the default; dark follows the visitor's system, or data-theme="dark". */

:root {
  color-scheme: light dark;

  /* Colour: surfaces */
  --bg: #edf0f4;            /* page background */
  --surface: #ffffff;       /* cards, header, inputs */
  --sunken: #f3f5f8;        /* bands and inset areas */
  --selected: #eaf0ff;      /* soft blue fill behind tags and highlights */
  --border: #e3e8ef;        /* hairlines */

  /* Colour: text */
  --text: #101828;          /* headings and body on bg, surface, sunken */
  --muted: #5b6474;         /* secondary text on bg, surface, sunken */
  --selected-text: #1a44b0; /* text on selected */
  --link: #2459e0;          /* links on bg and surface */

  /* Colour: brand and actions */
  --accent: #2459e0;        /* Varazza Blue: focus ring, highlights */
  --primary: #2459e0;       /* primary button fill */
  --primary-text: #ffffff;  /* label on primary */
  --danger: #c0352b;        /* error text */
  --pass: #15693e;          /* success text; the app's Mist green, since its Light #1a7f4b is only 4.39:1 on --bg */

  /* Type */
  --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: clamp(36px, 6vw, 56px);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  /* Spacing (the app's steps, plus larger ones for page sections) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --page-max: 1120px;
  --gutter: 20px;

  /* Shape */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 0 0 1px rgb(16 24 40 / 5%), 0 1px 2px rgb(16 24 40 / 4%), 0 6px 16px -6px rgb(16 24 40 / 8%);
  --shadow-card-hover: 0 0 0 1px rgb(16 24 40 / 6%), 0 2px 4px rgb(16 24 40 / 5%), 0 14px 28px -8px rgb(16 24 40 / 16%);
  --shadow-pop: 0 0 0 1px rgb(16 24 40 / 6%), 0 18px 40px -10px rgb(16 24 40 / 28%);
  --card-border: transparent;

  /* Focus: a solid ring, 3:1 or more on every surface */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  /* Sticky header height; scroll-padding keeps focused items out from under it */
  --header-h: 64px;

  /* Motion */
  --ease: 0.15s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0c0e;
    --surface: #151518;
    --sunken: #1a1a1e;
    --selected: #23264a;
    --border: #26262c;
    --text: #ededef;
    --muted: #9095a0;
    --selected-text: #c9ccff;
    --link: #9ba3ff;
    --accent: #9ba3ff;
    --primary: #5e66eb;
    --primary-text: #ffffff;
    --danger: #f0857b;
    --pass: #5fd39a;
    --shadow-card: inset 0 1px 0 rgb(255 255 255 / 3%), 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-card-hover: inset 0 1px 0 rgb(255 255 255 / 4%), 0 8px 18px -8px rgb(0 0 0 / 70%);
    --shadow-pop: 0 0 0 1px #26262c, 0 20px 48px -12px rgb(0 0 0 / 70%);
    --card-border: #26262c;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0c0e;
  --surface: #151518;
  --sunken: #1a1a1e;
  --selected: #23264a;
  --border: #26262c;
  --text: #ededef;
  --muted: #9095a0;
  --selected-text: #c9ccff;
  --link: #9ba3ff;
  --accent: #9ba3ff;
  --primary: #5e66eb;
  --primary-text: #ffffff;
  --danger: #f0857b;
  --pass: #5fd39a;
  --shadow-card: inset 0 1px 0 rgb(255 255 255 / 3%), 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-card-hover: inset 0 1px 0 rgb(255 255 255 / 4%), 0 8px 18px -8px rgb(0 0 0 / 70%);
  --shadow-pop: 0 0 0 1px #26262c, 0 20px 48px -12px rgb(0 0 0 / 70%);
  --card-border: #26262c;
}

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