/* Urban Greens dashboard: design tokens.
   Source of truth: the oklch colours in design/reference/v3-template.html. Every oklch value
   below appears there verbatim (tests/unit/web/test_tokens.py enforces it). The hex values in
   design/reference/tokens.css are approximate conversions and are NOT used.
   Names follow the handoff (--ug-*). Tokens whose value the handoff did not name are named by role. */

:root {
  /* Paper */
  --ug-surface: oklch(0.985 0.006 110); /* app background, plates behind chart labels */
  --ug-panel: oklch(0.96 0.012 130); /* callouts, quotes, row and tab hover */
  --ug-tile: oklch(0.955 0.012 130); /* four-week tiles */
  --ug-empty: oklch(0.975 0.008 130); /* empty / good state */
  --ug-canvas: oklch(0.93 0.012 145); /* segmented control track */

  /* Ink */
  --ug-ink-heading: oklch(0.24 0.04 152);
  --ug-ink-title: oklch(0.28 0.045 152);
  --ug-ink-name: oklch(0.26 0.04 152); /* row names, section titles on desktop */
  --ug-ink-figure: oklch(0.26 0.035 150);
  --ug-ink-site: oklch(0.28 0.035 150);
  --ug-ink-callout: oklch(0.3 0.035 150);
  --ug-ink-body: oklch(0.32 0.03 150);
  --ug-ink-explain: oklch(0.33 0.03 150);
  --ug-ink-label: oklch(0.35 0.02 148);
  --ug-ink-value: oklch(0.4 0.02 148);
  --ug-ink-secondary: oklch(0.45 0.02 145);
  --ug-ink-kpi-label: oklch(0.48 0.02 145);
  --ug-ink-subtle: oklch(0.5 0.02 145);
  --ug-ink-note: oklch(0.52 0.02 145);
  --ug-ink-hist: oklch(0.54 0.02 145);
  --ug-ink-muted: oklch(0.55 0.02 145);
  --ug-ink-sub: oklch(0.56 0.02 145);
  --ug-ink-faint: oklch(0.58 0.02 145);
  --ug-ink-caveat: oklch(0.6 0.02 145);
  --ug-ink-tab-off: oklch(0.62 0.02 145);
  --ug-ink-chart-value: oklch(0.3 0.06 152); /* bar values printed under the chart */

  /* Lines (1px only) */
  --ug-line-strong: oklch(0.86 0.015 145);
  --ug-line-head: oklch(0.88 0.01 145);
  --ug-line-frame: oklch(0.88 0.012 145);
  --ug-line-divider: oklch(0.9 0.01 145);
  --ug-line-row: oklch(0.91 0.01 145);
  --ug-line-row-soft: oklch(0.92 0.008 145);
  --ug-line-row-end: oklch(0.93 0.008 145);
  --ug-line-leader: oklch(0.87 0.01 145); /* dotted */
  --ug-line-axis: oklch(0.78 0.02 145);
  --ug-line-chip-off: oklch(0.85 0.02 145);
  --ug-line-dashed: oklch(0.86 0.02 145);
  --ug-line-seg-on: oklch(0.82 0.02 145);
  --ug-line-link: oklch(0.8 0.03 150);

  /* Forest (green block, chip on) */
  --ug-forest: oklch(0.27 0.045 152);
  --ug-forest-hover: oklch(0.23 0.04 152);
  --ug-forest-rule: oklch(0.35 0.05 152);
  --ug-nav-active: oklch(0.35 0.08 152); /* active tab underline / top rule */
  --ug-on-forest: oklch(0.96 0.01 120);
  --ug-on-forest-label: oklch(0.78 0.06 130);
  --ug-on-forest-meta: oklch(0.72 0.04 130);
  --ug-on-forest-act: oklch(0.86 0.06 130); /* arrow action lines */
  --ug-on-forest-note: oklch(0.75 0.03 130);
  --ug-on-forest-count: oklch(0.68 0.04 130);
  --ug-flag-rule: oklch(0.62 0.14 90); /* flag left border */
  --ug-flag-label: oklch(0.82 0.11 85); /* FLAG eyebrow on forest */
  --ug-sugg-rule: oklch(0.6 0.08 152); /* suggestion left border */

  /* Signal: meaning only */
  --ug-brand: oklch(0.52 0.13 150); /* logo dot, callout rule */
  --ug-good: oklch(0.42 0.11 152);
  --ug-good-soft: oklch(0.42 0.1 152); /* empty-state title */
  --ug-bad: oklch(0.52 0.14 32);
  --ug-warn: oklch(0.55 0.11 70);
  --ug-warn-ink: oklch(0.45 0.06 70); /* eyebrow inside a warn panel */
  --ug-warn-rule: oklch(0.72 0.1 85); /* left border of "what this means" panel */
  --ug-link: oklch(0.42 0.09 152);
  --ug-link-hover: oklch(0.32 0.07 152);
  --ug-live-dot: oklch(0.55 0.13 150);
  --ug-pending-dot: oklch(0.72 0.13 75);

  /* Example-data badge (shown while demo_mode is on) */
  --ug-badge-bg: oklch(0.96 0.035 90);
  --ug-badge-border: oklch(0.78 0.07 85);
  --ug-badge-dot: oklch(0.7 0.14 75);
  --ug-badge-text: oklch(0.45 0.07 70);

  /* Avatar */
  --ug-avatar-bg: oklch(0.9 0.02 145);
  --ug-avatar-text: oklch(0.4 0.03 150);

  /* Chart series (consumed by charts.css as well) */
  --ug-series-sales: oklch(0.78 0.055 152); /* bars: net sales, paid spend */
  --ug-series-labour: oklch(0.40 0.10 152);
  --ug-series-wastage: oklch(0.56 0.14 40);
  --ug-series-food: oklch(0.58 0.09 95);
  --ug-series-spend: oklch(0.78 0.055 152); /* Marketing: paid spend bars */
  --ug-series-share: oklch(0.40 0.10 152); /* Marketing: spend % of sales line */
  --ug-series-price: oklch(0.50 0.10 300);
  --ug-spark-up: oklch(0.78 0.07 152);
  --ug-spark-down: oklch(0.78 0.1 40);
  --ug-bysite-bar: oklch(0.58 0.1 152);
  --ug-bysite-track: oklch(0.94 0.01 145);

  /* Product mix (category bars, seg-0..4) */
  --ug-prod-salads: oklch(0.40 0.10 152);
  --ug-prod-bowls: oklch(0.58 0.10 152);
  --ug-prod-trays: oklch(0.75 0.07 152);
  --ug-prod-breakfast: oklch(0.78 0.11 85);
  --ug-prod-drinks: oklch(0.86 0.04 110);

  /* Channel split (channel bar, seg-0..2) and two-part splits */
  --ug-ch-instore: oklch(0.45 0.11 152);
  --ug-ch-delivery: oklch(0.68 0.08 152);
  --ug-ch-corporate: oklch(0.82 0.06 90);
  --ug-split-minor: oklch(0.78 0.07 152); /* branded share */
  --ug-split-uncertain: oklch(0.86 0.03 90); /* uncertain loyalty matches (dashed edge) */
  --ug-split-uncertain-edge: oklch(0.72 0.08 85);

  /* Type */
  --ug-font-sans: "Instrument Sans", Helvetica, Arial, sans-serif; /* 400, 600, italic 400 */
  --ug-font-mono: "IBM Plex Mono", ui-monospace, monospace; /* 400, 500 */

  /* Radius */
  --ug-r-pill: 100px; /* chips, badge */
  --ug-r-track: 4px; /* segmented control track */
  --ug-r-seg: 2px; /* segment, bars, chart bars */
  --ug-r-tile: 3px; /* four-week tiles */

  /* Layout */
  --ug-phone-pad-x: 22px;
  --ug-tablet-pad-x: 32px;
  --ug-desk-max: 1320px;
  --ug-desk-pad-x: 44px;
}