/* Design tokens. Source of truth: DESIGN.md. Every colour is a light/dark pair via light-dark(). */

:root {
  /* Pending decisions: change the value here, nothing else. */
  --surface-section-dark: #12161d;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Theme: OS by default, [data-theme] on <html> overrides. */
  color-scheme: light dark;

  /* Colour (ratios from DESIGN.md) */
  --accent: #0071e3; /* white on it 4.70:1 */
  --accent-hover: #0066cc; /* white on it 5.57:1 */
  --on-accent: #fff;
  --link: light-dark(#0066cc, #2997ff); /* 5.39 canvas, 5.11 surface / 6.96 black, 6.01 dark surface */
  --ink: light-dark(#1d1d1f, #f5f5f7); /* 16.28 / 19.29 */
  --muted: light-dark(#666, #a1a1a6); /* 5.27 on surface / 8.16 black, 7.05 dark surface */
  --canvas: light-dark(#fbfbfd, #000);
  --surface: light-dark(#f5f5f7, var(--surface-section-dark));
  --hairline: light-dark(#d2d2d7, #38383a);
  --nav-bg: light-dark(rgb(255 255 255 / 0.72), rgb(29 29 31 / 0.72));
  --nav-hairline: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.1));
  --hover-wash: light-dark(rgb(0 0 0 / 0.05), rgb(255 255 255 / 0.1));
  --pill-bg: light-dark(rgb(255 255 255 / 0.72), rgb(14 20 40 / 0.5));
  --pill-edge: light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.16));
  --ground: light-dark(var(--canvas), #060c24); /* page ground of the subpages: the scenes' navy in dark */
  --footer-bg: light-dark(#f5f5f7, var(--ground)); /* dark: the page navy, not a grey; muted text on it 7.5:1 */
  --glow: 70 130 255;
  --menu-bg: light-dark(rgb(255 255 255 / 0.95), rgb(29 29 31 / 0.95));

  /* Glucose range colours: data only, never decoration */
  --range-in-text: light-dark(#1a7f45, #30d158);
  --range-high-text: light-dark(#a35200, #ffb340);
  --range-low-text: light-dark(#c62828, #ff6961);
  --range-in-fill: #2a9d5c;
  --range-high-fill: #f59e0b;
  --range-low-fill: #e5484d;

  /* Type: two weights, fluid sizes */
  --weight-regular: 400;
  --weight-semibold: 600;
  --text-display: clamp(2.25rem, 5vw + 1rem, 3.5rem);
  --text-headline: clamp(1.75rem, 3vw + 0.75rem, 3rem);
  --text-title: 1.3125rem;
  --text-lead: 1.3125rem;
  --text-body: 1.0625rem;
  --text-label: 0.75rem;
  --text-caption: 0.875rem;
  --leading-display: 1.07;
  --leading-headline: 1.08;
  --leading-title: 1.19;
  --leading-lead: 1.38;
  --leading-body: 1.47;
  --tracking-display: -0.015em;
  --tracking-headline: -0.01em;
  --tracking-body: -0.022em;
  --measure: 68ch;

  /* Spacing scale 8 / 16 / 24 / 40 / 80 / 120 */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 5rem;
  --space-section: clamp(3.75rem, 8vw, 7.5rem);
  --gutter: 1rem;
  --container: 1024px;
  --nav-height: 48px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 980px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.6, 1);
  --dur-fast: 0.15s;
  --dur: 0.3s;

  /* Non-colour theme values (light) */
  --window-shadow: drop-shadow(0 0 1px rgb(0 0 0 / 0.18)) drop-shadow(0 20px 40px rgb(0 0 0 / 0.16));
  --popover-shadow: drop-shadow(0 0 1px rgb(0 0 0 / 0.18)) drop-shadow(0 10px 30px rgb(0 0 0 / 0.16));
  --logo-filter: brightness(0);
  --show-sun: none;
  --show-moon: block;
  --show-light-img: block;
  --show-dark-img: none;
}

@media (min-width: 735px) {
  :root {
    --gutter: 1.375rem;
  }
}

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

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

/* Non-colour theme values (dark): same body twice, once for the OS default, once for the manual choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --window-shadow: drop-shadow(0 0 1px rgb(255 255 255 / 0.22)) drop-shadow(0 20px 60px rgb(0 0 0 / 0.55));
    --popover-shadow: drop-shadow(0 0 1px rgb(255 255 255 / 0.22)) drop-shadow(0 10px 30px rgb(0 0 0 / 0.55));
    --logo-filter: brightness(0) invert(1);
    --show-sun: block;
    --show-moon: none;
    --show-light-img: none;
    --show-dark-img: block;
  }
}

:root[data-theme="dark"] {
  --window-shadow: drop-shadow(0 0 1px rgb(255 255 255 / 0.22)) drop-shadow(0 20px 60px rgb(0 0 0 / 0.55));
  --popover-shadow: drop-shadow(0 0 1px rgb(255 255 255 / 0.22)) drop-shadow(0 10px 30px rgb(0 0 0 / 0.55));
  --logo-filter: brightness(0) invert(1);
  --show-sun: block;
  --show-moon: none;
  --show-light-img: none;
  --show-dark-img: block;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s;
    --dur: 0s;
  }
}