/* НаКрючке ↔ mar-ui bridge (orange palette, graphite tone, both themes).
   style.css keeps its own names (--bg, --panel, --accent …); here they read the
   kit's semantic tokens. Product-only colours (mint status, tool tints, map chips)
   are defined once per theme here and nowhere else. Loaded after style.css. */
:root {
  --bg: var(--ds-bg);
  --panel: var(--ds-surface-1);
  --card: var(--ds-surface-2);          /* cards, calendar, stats: blocks that sit on the page */
  --card-edge: transparent;             /* 1px card outline, drawn as an inset shadow (no size change) */
  --tile: var(--ds-surface-2);          /* controls inside a card or sheet: tool tiles, list rows, chips */
  --inset: var(--ds-surface-1);         /* wells inside a card: week strip */
  --track: var(--ds-surface-1);         /* segmented control track (stands out on the page too) */
  --thumb: var(--ds-surface-3);         /* its selected segment */
  --page: var(--ds-surface-1);          /* content pages (diary, reports, profile) on desktop */
  --sheet-edge: none;
  --sheet-shadow: 0 14px 48px #0003;
  --raised: var(--ds-surface-3);
  --raised-hover: var(--ds-surface-hover);
  --field: var(--ds-bg);
  --line: var(--ds-border-strong);
  --hairline: color-mix(in srgb, var(--ds-text) 6%, transparent);
  --text: var(--ds-text);
  --text-2: var(--ds-text-2);
  --muted: var(--ds-text-muted);
  --placeholder: var(--ds-text-disabled);
  --accent: var(--ds-accent);
  --accent-hover: var(--ds-accent-hover);
  --accent-ink: var(--ds-accent-text);          /* accent used as text or icon colour */
  --accent-dim: color-mix(in srgb, var(--ds-accent) 9%, transparent);
  --accent-line: color-mix(in srgb, var(--ds-accent) 30%, transparent);
  --on-accent: var(--ds-on-accent);
  --danger: var(--ds-danger-text);
  --danger-dim: color-mix(in srgb, var(--ds-danger) 10%, transparent);
  --focus: var(--ds-focus);
  --scrim: #080a0cb5;
  --shadow: 0 14px 48px #0003;
  --shadow-strong: 0 12px 44px #0005;
  --toast-bg: var(--ds-surface-hover);
  --switch-off: var(--ds-border-strong);
  --switch-thumb: var(--ds-text);
  --grip: var(--ds-border-strong);
  /* Product colours: mint = "public / ok", warm sand = warning, tool tints. */
  --mint: #a1cfc2;
  --mint-ink: #b1c3be;
  --warn: #eac692;
  --tool-2: #a2c9d6;
  --tool-3: #c8bea6;
  /* Chips that sit on the map tiles (always light OSM tiles, in both themes). */
  --map-bg: #dbe1d8;
  --map-chip: #ffffffee;
  --map-chip-ink: #32444b;
}
:root[data-theme="light"] {
  --field: var(--ds-surface-1);
  /* Light: white cards with a hairline on the grey page, grey wells inside them. */
  --card: var(--ds-surface-1);
  --card-edge: var(--ds-border);
  --tile: var(--ds-surface-2);
  --inset: var(--ds-surface-2);
  --track: var(--ds-surface-3);         /* visible both on the grey page and inside white cards */
  --thumb: var(--ds-surface-1);
  --page: var(--ds-bg);
  --sheet-edge: 1px solid var(--ds-border);
  --sheet-shadow: var(--ds-shadow-float);
  --hairline: color-mix(in srgb, var(--ds-text) 8%, transparent);
  --accent-dim: color-mix(in srgb, var(--ds-accent) 10%, transparent);
  --danger-dim: color-mix(in srgb, var(--ds-danger) 9%, transparent);
  --scrim: #1b1d2259;
  --shadow: 0 10px 34px #1d1a2a17;
  --shadow-strong: 0 14px 40px #1d1a2a26;
  --toast-bg: var(--ds-elevated);
  --switch-thumb: #ffffff;
  --mint: #2c7563;
  --mint-ink: #3e6158;
  --warn: #8a5b12;
  --tool-2: #2f6f86;
  --tool-3: #7a6a45;
}