/* Design tokens — "Espresso & Cream" coffee brand: espresso buttons, caramel
   accents, cream page, one light theme (no dark mode, no theme switching).
   Change values here, never hard-code colors in feature CSS. */
:root {
  /* Brand */
  --color-primary: #4A2C20;        /* espresso: primary buttons, selected states (white 12.6:1) */
  --color-primary-ink: #3A2118;    /* hover/pressed */
  --color-accent: #EBD9C1;         /* latte foam: secondary buttons, sandbox badge — dark text only */
  --color-accent-ink: #2B1D16;
  --color-highlight: #F6E3C8;      /* pale caramel: callouts, pills */
  --color-highlight-ink: #5A3410;
  --color-danger: #B42318;
  --color-success: #2F7D4A;
  --color-warning: #8A5A12;        /* dark amber (white 5.9:1) */
  --color-on-dark: #FFFFFF;        /* text/icons on dark surfaces */
  --color-google-bg: #FFFFFF;
  --color-google-ink: #2B1D16;

  /* Charts (monthly dashboard) */
  --chart-bar: #4A2C20;            /* espresso bars */
  --chart-compare: #A35A1F;        /* caramel comparison line (5:1 on cream) */
  --chart-track: #F3E8DA;          /* empty bar / heatmap zero */
  --chart-good: #2F7D4A;
  --chart-bad: #B42318;

  /* Surfaces & text */
  --color-focus: #A35A1F;          /* caramel focus rings (5:1 on cream) */
  --color-bg: #FFFBF5;             /* cream */
  --color-surface: #FFFFFF;
  --color-surface-2: #F6EEE4;
  --color-text: #2B1D16;           /* dark roast */
  --color-text-2: #4A3A31;
  --color-muted: #7A6558;
  --color-faint: #8C7A6E;
  --color-border: #E6D8C6;
  --color-link: #4A2C20;
  --color-tint: #F3E8DA;           /* selected rows, hovers */
  --color-header: #FFFBF5;
  --color-header-ink: #2B1D16;
  --color-input: #FFFFFF;
  --color-danger-text: #B42318;
  --shadow-sm: 0 1px 2px rgba(43, 29, 22, 0.06);
  --shadow-md: 0 2px 8px rgba(43, 29, 22, 0.08);
  --shadow-lg: 0 12px 32px rgba(43, 29, 22, 0.14);
  color-scheme: light;

  /* Type: system stack (the display/body/mono names stay for older CSS) */
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font);
  --font-body: var(--font);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing / shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --tap: 44px;                     /* minimum tap target */

  /* Layout */
  --topbar-h: 60px;
  --content-max: 560px;
}