/* magi dashboard design tokens. Copied verbatim from apps/web/src/app/globals.css (no new values).
   Light values in :root; dark under the system preference, or forced with data-theme="light"|"dark".
   Font stack (body): -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font-inter), system-ui, sans-serif
   (var(--font-inter) is next/font Inter; SF Pro on Apple devices, never bundled.)
   Radii in globals.css: cards (.material) 16px, bottom sheet 20px 20px 0 0, pebble 8px, heat cells 4px. */
:root {
  color-scheme: light dark;
  --label: #000000;
  /* iOS uses .6; .72 keeps secondary text at >= 4.5:1 on the card. */
  --label-2: rgba(60, 60, 67, 0.72);
  --label-3: rgba(60, 60, 67, 0.3);
  --bg: #ffffff;
  --bg-grouped: #f2f2f7;
  --bg-grouped-2: #ffffff;
  --separator: rgba(60, 60, 67, 0.29);
  --fill: rgba(120, 120, 128, 0.2);
  /* Bic-pen ink: 7.9:1 on the card (#fff), 7.0:1 on the page (#f2f2f7). */
  --accent: #2443c4;
  /* Text on an accent fill: white, 7.9:1 on the light accent. */
  --on-accent: #ffffff;
  --green: rgb(52, 199, 89);
  --red: rgb(255, 56, 60);
  --orange: rgb(255, 141, 40);
  --amber: #c48a00;
  --material-bar: rgba(249, 249, 249, 0.78);
  /* Heat ramp, paper to ink: every step clearly darker and more saturated (L* ~88 → 35). */
  --heat-0: rgba(120, 120, 128, 0.14);
  --heat-1: #d2d9f5;
  --heat-2: #a9b6ee;
  --heat-3: #6a80dc;
  --heat-4: #2443c4;
  /* Neutral bar fill (charts, share bars); the accent marks only the bar that matters. */
  --bar: rgba(60, 60, 67, 0.22);
  --segment-thumb: #ffffff;
  --cat-1: #2443c4;
  --cat-2: #eb6834;
  --cat-3: #0e9aa7;
  --income: #7fcf98;
  --spend: #d6453d;
  --cat-4: #eda100;
  --cat-5: #e87ba4;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --pebble: color-mix(in srgb, var(--label) 6%, transparent);
  --glass-rim: rgba(255, 255, 255, 0.75);
  --glass-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.25);
  --sheen: rgba(255, 255, 255, 0.35);
  --lens-rim: rgba(255, 255, 255, 0.5);

  /* Motion: one curve everywhere, no overshoot. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-press: 120ms;
  --dur-fade: 180ms;
  --dur-enter: 420ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --label: #ffffff;
    --label-2: rgba(235, 235, 245, 0.62);
    --label-3: rgba(235, 235, 245, 0.3);
    --bg: #1c1c1e;
    --bg-grouped: #000000;
    --bg-grouped-2: #2c2c2e;
    --separator: rgba(84, 84, 88, 0.6);
    --fill: rgba(120, 120, 128, 0.36);
    /* Ink, lifted for dark: 7.0:1 on the card (#1c1c1e), 8.6:1 on the page (#000). */
    --accent: #8da0ff;
    /* Dark ink on the lifted accent: 7.2:1 (white would be 2.4:1). */
    --on-accent: #0b1440;
    --green: rgb(48, 209, 88);
    --red: rgb(255, 66, 69);
    --orange: rgb(255, 146, 48);
    --amber: #ffc21a;
    --material-bar: rgba(29, 29, 31, 0.72);
    /* Dark ramp: brighter and more saturated each step, never a pale pastel at the top. */
    --heat-0: rgba(120, 120, 128, 0.22);
    --heat-1: #2a3470;
    --heat-2: #3a4ca8;
    --heat-3: #5a70dc;
    --heat-4: #8da0ff;
    --bar: rgba(235, 235, 245, 0.24);
    --segment-thumb: #636366;
    --cat-1: #6f86f5;
    --cat-2: #d95926;
    --cat-3: #199eb0;
    --income: #2e7d4f;
    --spend: #ff8a80;
    --cat-4: #c98500;
    --cat-5: #d55181;
    --card-shadow: none;
    --pebble: color-mix(in srgb, var(--label) 10%, transparent);
    --glass-rim: rgba(255, 255, 255, 0.14);
    --glass-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --sheen: rgba(255, 255, 255, 0.14);
    --lens-rim: rgba(255, 255, 255, 0.16);
  }
}

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

:root[data-theme="dark"] {
  color-scheme: dark;
  --label: #ffffff;
  --label-2: rgba(235, 235, 245, 0.62);
  --label-3: rgba(235, 235, 245, 0.3);
  --bg: #1c1c1e;
  --bg-grouped: #000000;
  --bg-grouped-2: #2c2c2e;
  --separator: rgba(84, 84, 88, 0.6);
  --fill: rgba(120, 120, 128, 0.36);
  --accent: #8da0ff;
  --on-accent: #0b1440;
  --green: rgb(48, 209, 88);
  --red: rgb(255, 66, 69);
  --orange: rgb(255, 146, 48);
  --amber: #ffc21a;
  --material-bar: rgba(29, 29, 31, 0.72);
  --heat-0: rgba(120, 120, 128, 0.22);
  --heat-1: #2a3470;
  --heat-2: #3a4ca8;
  --heat-3: #5a70dc;
  --heat-4: #8da0ff;
  --bar: rgba(235, 235, 245, 0.24);
  --segment-thumb: #636366;
  --cat-1: #6f86f5;
  --cat-2: #d95926;
  --cat-3: #199eb0;
  --income: #2e7d4f;
  --spend: #ff8a80;
  --cat-4: #c98500;
  --cat-5: #d55181;
  --card-shadow: none;
  --pebble: color-mix(in srgb, var(--label) 10%, transparent);
  --glass-rim: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --sheen: rgba(255, 255, 255, 0.14);
  --lens-rim: rgba(255, 255, 255, 0.16);
}