/* =========================================================
   Catat Warung — design tokens (shared by the app and landing.html)
   Clean editorial finance: flat surfaces, dividers over cards,
   yellow reserved for primary actions and selection.
   ========================================================= */
/* .theme-light / .theme-dark pin a subtree to one theme (landing page hero, mock screens) */
:root, .theme-light {
  color-scheme: light;

  /* Surfaces & text */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f4f0;
  --text: #141414;
  --text-2: #4a4943;
  --text-3: #6e6c64;
  --danger: #c92a2a;
  --border: #ecebe6;
  --border-strong: #d6d4cc;
  --sk-shine: rgba(255, 255, 255, .7);

  /* Brand */
  --accent: #ffd43b;
  --accent-pressed: #f2c200;
  --accent-soft: #fff5cc;
  --on-accent: #141414;

  /* Inverse surfaces (toast, tooltip, badges) */
  --inverse: #141414;
  --on-inverse: #ffffff;

  /* Charts: marks stay neutral for contrast; yellow is fill only */
  --chart-1: #141414;
  --chart-2: #8f8c83;
  --chart-muted: #dcdad2;
  --chart-area: rgba(255, 212, 59, .35);

  --focus: 0 0 0 3px rgba(255, 196, 0, .55);
  --overlay: rgba(20, 20, 20, .4);
  --shadow-overlay: 0 2px 6px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .14);
  --desk: #ffffff;

  /* Type scale */
  --fs-meta: 12px;
  --fs-sm: 14px;
  --fs-body: 16px;
  --fs-title: 20px;
  --fs-display: 28px;

  /* Spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --gutter: 16px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Controls */
  --control-h: 48px;
  --control-h-sm: 36px;
  --tabbar-h: 68px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Dark theme: follows the system unless the user picked a mode (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121211;
    --surface: #1b1b19;
    --surface-2: #242421;
    --text: #f2f1ec;
    --text-2: #c4c2ba;
    --text-3: #9a988f;
    --danger: #ff8a80;
    --border: #2a2a27;
    --border-strong: #3c3c37;
    --sk-shine: rgba(255, 255, 255, .05);
    --accent: #ffd43b;
    --accent-pressed: #ffdf66;
    --accent-soft: rgba(255, 212, 59, .14);
    --on-accent: #141414;
    --inverse: #f2f1ec;
    --on-inverse: #141414;
    --chart-1: #f2f1ec;
    --chart-2: #8c8a82;
    --chart-muted: #3c3c37;
    --chart-area: rgba(255, 212, 59, .22);
    --overlay: rgba(0, 0, 0, .6);
    --shadow-overlay: 0 2px 6px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .5);
    --desk: #0b0b0a;
  }
}
:root[data-theme="dark"], .theme-dark {
  color-scheme: dark;
  --bg: #121211;
  --surface: #1b1b19;
  --surface-2: #242421;
  --text: #f2f1ec;
  --text-2: #c4c2ba;
  --text-3: #9a988f;
  --danger: #ff8a80;
  --border: #2a2a27;
  --border-strong: #3c3c37;
  --sk-shine: rgba(255, 255, 255, .05);
  --accent: #ffd43b;
  --accent-pressed: #ffdf66;
  --accent-soft: rgba(255, 212, 59, .14);
  --on-accent: #141414;
  --inverse: #f2f1ec;
  --on-inverse: #141414;
  --chart-1: #f2f1ec;
  --chart-2: #8c8a82;
  --chart-muted: #3c3c37;
  --chart-area: rgba(255, 212, 59, .22);
  --overlay: rgba(0, 0, 0, .6);
  --shadow-overlay: 0 2px 6px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .5);
  --desk: #0b0b0a;
}