/* Design tokens — janado analytics v2, direction A ("hell und weich").
   Warm-grey canvas, white cards, ink pills, ONE accent (yellow). Every color in app/screens/charts comes from here. */
:root {
  color-scheme: light;
  /* brand */
  --ink: #272525;
  --paper: #f7f3f2;
  --yellow: #ffe300;
  --sky: #97cadb;
  --lavender: #c9b8f0;

  /* surfaces: canvas derived from paper, a touch cooler/lighter; cards pure white */
  --bg: #f1efee;
  --bg-2: #e9e6e5;          /* recessed wells (chips, tracks, segmented) */
  --surface: #ffffff;
  --surface-2: #faf9f8;     /* subtle fills inside cards (table header, hover) */
  --surface-3: #f2f0ef;     /* hover / pressed */
  --sidebar: #f1efee;
  --overlay: rgba(39, 37, 37, 0.28);
  --glass: rgba(255, 255, 255, 0.72);

  /* text */
  --text: #272525;
  --text-2: #5f5958;
  --text-3: #938c8a;
  --text-on-accent: #272525;
  --text-on-ink: #ffffff;

  /* lines (hairlines only, no hard borders) */
  --border: #ebe7e6;
  --border-strong: #dcd6d4;
  --hairline: rgba(39, 37, 37, 0.07);
  --grid: #efecea;
  --axis: #d9d3d1;

  /* accent (yellow, sparingly: value bubble, active chip, highlight bar) */
  --accent: #ffe300;
  --accent-hover: #f5da00;
  --accent-soft: #fff6b0;
  --focus: #272525;

  /* solid ink pill (active nav, primary action) */
  --pill: #272525;
  --pill-text: #ffffff;

  /* data marks */
  --mark: #272525;           /* primary measured series */
  --mark-soft: rgba(39, 37, 37, 0.08);
  --mark-compare: #b3acaa;   /* compare period: dotted line / hatched bar */
  --mark-model: #272525;     /* modelled (Hochrechnung): hatched */
  --pixel: #6f8f9a;          /* pixel/consent marker (calm sky-grey) */

  /* data tiers (v1 screens still use these) */
  --tier-shopify: #3d6b55;
  --tier-shopify-bg: #ecf3ef;
  --tier-measured: #4f7a89;
  --tier-measured-bg: #eaf3f6;
  --tier-modelled: #6b5aa6;
  --tier-modelled-bg: #f1edfa;
  --tier-sample: #7d6200;
  --tier-sample-bg: #fff7c7;
  --tier-off: #938c8a;
  --tier-off-bg: #f2f0ef;

  /* status (reserved, always with icon + label) */
  --good: #2f7d55;
  --good-bg: #e9f4ee;
  --warn: #946500;
  --warn-bg: #fff4d4;
  --bad: #c2453c;
  --bad-bg: #fcebe8;
  --info: #4f7a89;
  --info-bg: #eaf3f6;

  /* categorical chart series: ink first, then calm brand hues */
  --c1: #272525;
  --c2: #5d9db3;
  --c3: #8f7bd0;
  --c4: #c9a200;
  --c5: #c46b88;
  --c-other: #bdb6b4;
  --c-compare: #b3acaa;
  --c-tradein: #8f7bd0;
  /* sequential (sky ramp) for heatmaps */
  --seq-0: #f4f8fa;
  --seq-1: #dcecf2;
  --seq-2: #b9dae6;
  --seq-3: #8cc1d4;
  --seq-4: #5d9db3;
  --seq-5: #3a7387;

  /* type */
  --font-head: 'Outfit', system-ui, sans-serif;
  --font-text: 'Figtree', system-ui, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-hero: 56px;

  /* 8px grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* very soft, diffuse */
  --shadow-sm: 0 1px 2px rgba(39, 37, 37, 0.03), 0 4px 14px rgba(39, 37, 37, 0.04);
  --shadow-md: 0 2px 4px rgba(39, 37, 37, 0.03), 0 12px 32px rgba(39, 37, 37, 0.07);
  --shadow-lg: 0 4px 10px rgba(39, 37, 37, 0.05), 0 24px 60px rgba(39, 37, 37, 0.14);

  --sidebar-w: 0px;
  --topbar-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dark: ink-based layers, paper text. The shell resolves "system" to light|dark on <html data-theme>. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161515;
  --bg-2: #222020;
  --surface: #211f1f;
  --surface-2: #262424;
  --surface-3: #2e2b2b;
  --sidebar: #161515;
  --overlay: rgba(0, 0, 0, 0.55);
  --glass: rgba(33, 31, 31, 0.72);

  --text: #f7f3f2;
  --text-2: #c8c0be;
  --text-3: #8d8583;
  --text-on-ink: #272525;

  --border: #2f2c2c;
  --border-strong: #3d3939;
  --hairline: rgba(247, 243, 242, 0.07);
  --grid: #2a2727;
  --axis: #3d3939;

  --accent-hover: #fff04d;
  --accent-soft: rgba(255, 227, 0, 0.14);
  --focus: #ffe300;

  --pill: #f7f3f2;
  --pill-text: #272525;

  --mark: #f7f3f2;
  --mark-soft: rgba(247, 243, 242, 0.08);
  --mark-compare: #6f6866;
  --mark-model: #f7f3f2;
  --pixel: #97cadb;

  --tier-shopify: #8fd1ae;
  --tier-shopify-bg: rgba(143, 209, 174, 0.12);
  --tier-measured: #97cadb;
  --tier-measured-bg: rgba(151, 202, 219, 0.12);
  --tier-modelled: #c9b8f0;
  --tier-modelled-bg: rgba(201, 184, 240, 0.13);
  --tier-sample: #f5d76e;
  --tier-sample-bg: rgba(245, 215, 110, 0.12);
  --tier-off: #8d8583;
  --tier-off-bg: rgba(255, 255, 255, 0.05);

  --good: #6fcf97;
  --good-bg: rgba(111, 207, 151, 0.12);
  --warn: #f2c35b;
  --warn-bg: rgba(242, 195, 91, 0.12);
  --bad: #ff8a80;
  --bad-bg: rgba(255, 138, 128, 0.12);
  --info: #97cadb;
  --info-bg: rgba(151, 202, 219, 0.12);

  --c1: #f7f3f2;
  --c2: #97cadb;
  --c3: #b4a3ec;
  --c4: #e6c23a;
  --c5: #e08aa6;
  --c-other: #5e5856;
  --c-compare: #6f6866;
  --c-tradein: #b4a3ec;
  --seq-0: #262424;
  --seq-1: #24363d;
  --seq-2: #2a4c58;
  --seq-3: #376a7a;
  --seq-4: #5d9db3;
  --seq-5: #97cadb;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
}