/* RupeeLens design tokens ("Orbit"). One list: light-dark(light, dark) picks the value from color-scheme.
   Follows the device by default; <html data-theme="light|dark"> (the header toggle) forces one. */
:root {
  color-scheme: light dark;
  --font-anthropic-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-anthropic-serif: ui-rounded, "SF Pro Rounded", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* surfaces and text */
  --color-bg: light-dark(#f3f4fb, #05060f);
  --color-panel: light-dark(#ffffff, #0e1020);
  --color-fg: light-dark(#12142b, #eaf0ff);
  --color-fg-muted: light-dark(#575c82, #9aa0c8);
  --color-border-line: light-dark(#dcdfef, #20233f);
  --glass: light-dark(rgba(255, 255, 255, .72), rgba(255, 255, 255, .045));
  --glass-hi: light-dark(rgba(255, 255, 255, .95), rgba(255, 255, 255, .085));
  --glow: light-dark(rgba(79, 70, 229, .16), rgba(120, 140, 255, .22));

  /* accents */
  --accent: light-dark(#0891b2, #22d3ee);
  --accent-2: light-dark(#6d4fd6, #a78bfa);
  --accent-3: light-dark(#db2777, #f472b6);

  /* the three categories: used by tiles, charts, planets, dots */
  --cat-food: light-dark(#c2570c, #fb923c);
  --cat-groceries: light-dark(#0f8a63, #34d399);
  --cat-other: light-dark(#6d4fd6, #a78bfa);

  /* meaning */
  --color-ok: light-dark(#15803d, #4ade80);
  --color-warn: light-dark(#a16207, #fbbf24);
  --color-bad: light-dark(#be123c, #fb7185);

  /* chart helpers */
  --cds-chart-grid: light-dark(#e6e8f5, #171a32);
  --cds-chart-axis: light-dark(#c4c8e0, #2b2f55);
  --cds-chart-muted: light-dark(#c9cde4, #343862);
  --cds-chart-reference: light-dark(#8388b0, #7a80aa);
  --cds-surface-popover: light-dark(#ffffff, #151833);
  --cds-border: light-dark(#d2d6ec, #2a2e55);
  --cds-text-secondary: var(--color-fg-muted);
  --cds-shadow-popover: 0 10px 30px rgba(30, 30, 80, .16);   /* a shadow list is not a colour, so light-dark() cannot pick it: see the dark overrides below */

  /* Phase 3 tokens (from docs/design/phase3/mockups/mock.css): one surface ladder, one line pair, two text greys */
  --surface: var(--color-panel);
  --surface-2: light-dark(#f6f7fc, #13162a);
  --surface-3: light-dark(#eef0f8, #1a1e36);
  --line: var(--color-border-line);
  --line-strong: light-dark(#cfd3e6, #2b3060);
  --fg-2: var(--color-fg-muted);
  --fg-3: light-dark(#5f6488, #8a90bb);      /* captions: still AA on every surface */
  --grad: linear-gradient(120deg, #22d3ee, #a78bfa 55%, #f472b6);
  --grad-soft: linear-gradient(120deg, color-mix(in srgb, #22d3ee 18%, transparent), color-mix(in srgb, #a78bfa 18%, transparent) 55%, color-mix(in srgb, #f472b6 18%, transparent));
  --on-grad: #0a0b1a;
  --watch: var(--color-warn);                 /* amber: only for thresholds the person set, and "needs you" states */
  --alert: var(--color-bad);                  /* red: only for real problems (sign-in lost, delete) */
  --font-display: var(--font-anthropic-serif);
  /* radius scale: 28 hero and sheets, 22 cards, 16 inner panels and inputs, 12 small, pill */
  --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-pill: 999px;
  /* shadows are not colours, so light-dark() cannot pick them: the dark values are in the blocks below */
  --shadow: 0 1px 2px rgba(20, 24, 60, .05), 0 8px 24px -14px rgba(30, 30, 90, .16);
  --shadow-lift: 0 1px 2px rgba(20, 24, 60, .06), 0 18px 40px -22px rgba(30, 30, 90, .26);
  --shadow-pop-2: 0 24px 60px -18px rgba(30, 30, 90, .28);
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.4, .5, 1);
  --tabbar-h: 68px; --topbar-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px);
  --tap: 44px;

  /* shape, spacing, type */
  --cds-radius: var(--r-lg); --radius-sm: var(--r-md);
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 18px; --cds-pad-xl: 24px;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 14px; --cds-gap-lg: 20px;
  --cds-font-size-caption: 13px; --cds-font-size-body: 16px; --cds-font-size-heading: 19px;   /* 16 px body, 13 px captions: nothing smaller outside chart axes */
  --cds-font-size-title: clamp(24px, 4.2vw, 32px);
  --cds-font-weight-medium: 600;
  --cds-dur-slow: .45s; --cds-ease-out: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cds-shadow-popover: 0 10px 34px rgba(0, 0, 0, .6);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset; --shadow-lift: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -30px rgba(0, 0, 0, .7); --shadow-pop-2: 0 30px 80px -20px rgba(0, 0, 0, .75); } }
:root[data-theme="dark"] { --cds-shadow-popover: 0 10px 34px rgba(0, 0, 0, .6);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset; --shadow-lift: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 30px 60px -30px rgba(0, 0, 0, .7); --shadow-pop-2: 0 30px 80px -20px rgba(0, 0, 0, .75); }

@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }

html, body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; background:
  radial-gradient(60rem 36rem at 12% -8%, light-dark(rgba(8, 145, 178, .10), rgba(34, 211, 238, .10)), transparent 60%),
  radial-gradient(52rem 34rem at 92% 0%, light-dark(rgba(109, 79, 214, .10), rgba(167, 139, 250, .12)), transparent 60%),
  var(--color-bg); background-attachment: fixed; }
[hidden] { display: none !important; }   /* components that set display must never beat the hidden attribute */
#dash-root { padding: 0 0 56px; }
.dash-skeleton { color: transparent; background: var(--cds-chart-grid); border-radius: 6px; min-width: 4rem; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
:root { --heat-ink: light-dark(#ffffff, #05060f); }