/* Design tokens — white dotted canvas, near-black dashboard cards, Inter. */
:root {
  color-scheme: light;

  /* Canvas */
  --canvas: #ffffff;
  --canvas-dot: #c9c9c9;
  --canvas-dot-gap: 22px;
  --ink: #111111;
  --ink-soft: #4a4a4a;
  --ink-mute: #6b6b6b;

  /* Cards */
  --card: #191919;
  --card-raised: #222222;
  --card-line: #000000;
  --card-dot: rgba(255, 255, 255, 0.06);
  --on-card: #f5f5f5;
  --on-card-soft: #c9c9c9;
  --on-card-mute: #9a9a9a;
  --hairline: rgba(255, 255, 255, 0.1);

  /* Pills */
  --pill: #1a1a1a;
  --pill-ink: #c9c9c9;
  --pill-active: #ffffff;
  --pill-active-ink: #111111;

  /* Light surfaces (Projects / Journey) */
  --sheet: #ffffff;
  --sheet-line: #ebebeb;
  --sheet-fill: #f3f3f3;

  /* Accent: used for the gauge, flowers, focus */
  --focus: #2f6bff;
  --link: #1d4ed8;

  /* Type */
  --font: "Inter", ui-sans-serif, system-ui, sans-serif;
  --fs-label: 0.8125rem;
  --fs-body: 0.9375rem;
  --fs-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-number: clamp(3rem, 2.4rem + 2vw, 4.25rem);
  --fs-view: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);

  /* Shape */
  --r-card: 20px;
  --r-sheet: 22px;
  --gap: 8px;
  --gutter: 16px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* easeOutBack: springy settle */
  --t-fast: 180ms;
  --t-med: 420ms;
}

@media (min-width: 720px) {
  :root {
    --gap: 8px;
    --gutter: 16px;
  }
}