/* Runtime theme source of truth. See DESIGN.md for override recipes.
 * Defaults preserve the existing light theme. Load before app.css.
 * Override tokens on :root (or :root[data-theme="name"]) after this file.
 */
:root {
  color-scheme: light;

  /* 1. Semantic palette: brand, surfaces, content and interaction states */
  --bg: #f4f6f5;
  --surface: #ffffff;
  --surface-muted: #f8faf9;
  --text: #18221f;
  --muted: #68746e;
  --subtle: #8a9791;
  --border: #dbe3df;
  --border-strong: #c3d0ca;
  --accent: rgb(var(--brand-rgb));
  --accent-dark: #09683a;
  --accent-soft: #e7f5ec;
  --warning: #a7670b;
  --warning-soft: #fff5de;
  --danger: #c2443e;
  --danger-soft: #fff0ef;
  --brand-rgb: 22, 131, 75;
  --placeholder: #9aa59f;
  --border-hover: #a5b6ad;
  --surface-hover: #f9fcfa;
  --danger-border: #e7b4b1;
  --danger-hover: #a93530;
  --danger-border-hover: #d99490;
  --disabled-text: #a5afaa;
  --disabled-bg: #eef1ef;
  --disabled-border: #e2e7e4;
  --warning-border: #e3ad45;
  --selection-border: #c6e7d2;
  --table-divider: #edf1ef;
  --table-header-bg: #fafcfb;
  --surface-tinted: #fbfdfc;
  --warning-dot: #e4ab37;
  --delisted-dot: #8c9792;
  --filter-border: #b8dfc7;
  --image-placeholder: #eef2ef;
  --tab-hover-bg: rgba(231, 245, 236, 0.58);
  --backdrop: rgba(20, 32, 26, 0.38);
  --on-accent: #ffffff;

  /* Production status palette */
  --production-in-progress-bg: #fef08a;
  --production-in-progress-text: #713f12;
  --production-completed-bg: #bfdbfe;
  --production-completed-text: #1e3a8a;
  --production-listed-bg: #bbf7d0;
  --production-listed-text: #14532d;
  --production-delisted-bg: #fecaca;
  --production-delisted-text: #7f1d1d;
  --production-archived-bg: #e5e7eb;
  --production-archived-text: #374151;

  /* 2. Typography */
  --font-size-tiny: 10px;
  --font-size-meta: 11px;
  --font-size-caption: 12px;
  --font-size-body-sm: 13px;
  --font-size-body: 14px;
  --font-size-summary: 15px;
  --font-size-detail: 16px;
  --font-size-modal: 17px;
  --font-size-icon-sm: 18px;
  --font-size-heading: 19px;
  --font-size-icon-md: 20px;
  --font-size-brand: 21px;
  --font-size-icon-lg: 22px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 650;
  --font-weight-bold: 700;
  --font-weight-strong: 750;
  --line-height-body: 1.45;
  --line-height-brand: 1.1;
  --line-height-heading: 1.25;
  --line-height-control: 1.2;
  --line-height-code: 1.5;
  --tracking-brand: -0.02em;
  --tracking-heading: -0.012em;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 3. Density and spacing (density=1 preserves current layout) */
  --space-1: calc(1px * var(--density));
  --space-2: calc(2px * var(--density));
  --space-3: calc(3px * var(--density));
  --space-4: calc(4px * var(--density));
  --space-5: calc(5px * var(--density));
  --space-6: calc(6px * var(--density));
  --space-7: calc(7px * var(--density));
  --space-8: calc(8px * var(--density));
  --space-9: calc(9px * var(--density));
  --space-10: calc(10px * var(--density));
  --space-11: calc(11px * var(--density));
  --space-12: calc(12px * var(--density));
  --space-13: calc(13px * var(--density));
  --space-14: calc(14px * var(--density));
  --space-15: calc(15px * var(--density));
  --space-16: calc(16px * var(--density));
  --space-17: calc(17px * var(--density));
  --space-18: calc(18px * var(--density));
  --space-19: calc(19px * var(--density));
  --space-20: calc(20px * var(--density));
  --space-21: calc(21px * var(--density));
  --space-24: calc(24px * var(--density));
  --space-28: calc(28px * var(--density));
  --space-34: calc(34px * var(--density));
  --space-42: calc(42px * var(--density));
  --density: 1;

  /* 4. Shape, elevation, focus and motion */
  --shadow: 0 8px 22px rgba(19, 42, 31, 0.06);
  --radius: 8px;
  --radius-small: 5px;
  --focus: 0 0 0 3px rgba(var(--brand-rgb), 0.18);
  --shadow-brand: 0 3px 8px rgba(var(--brand-rgb), 0.22);
  --shadow-menu: 0 10px 25px rgba(23, 47, 35, 0.14);
  --shadow-modal: 0 24px 70px rgba(18, 38, 28, 0.22);
  --shadow-toast: 0 12px 26px rgba(19, 42, 31, 0.12);
  --radius-badge: 3px;
  --radius-menu-item: 4px;
  --radius-large: 10px;
  --radius-round: 50%;
  --duration-fast: 120ms;
  --layer-skip: 20;
  --layer-menu: 25;
  --layer-toast: 30;
  --status-ring-normal: 0 0 0 3px var(--accent-soft);
  --status-ring-warning: 0 0 0 3px var(--warning-soft);
  --status-ring-danger: 0 0 0 3px var(--danger-soft);

  /* 5. Component and layout contracts */
  --page-max: 1520px;
  --viewport-min: 320px;
  --table-min: 980px;
  --products-table-min: 1160px;
  --compact-table-min: 530px;
  --preview-table-min: 620px;
  --history-table-min: 480px;
  --form-max: 960px;
  --settings-max: 1040px;
  --modal-width: 720px;
  --modal-max-height: 760px;
  --menu-min-width: 148px;
  --detail-chart-height: 200px;
  --cover-size: 150px;
  --cover-size-mobile: 112px;
  --empty-row-height: 190px;
  --empty-min-height: 220px;
  --button-font-size: var(--font-size-body-sm);
  --button-font-weight: var(--font-weight-semibold);
  --table-font-size: var(--font-size-body-sm);
  --table-header-font-size: var(--font-size-caption);
  --stroke-width: 1px;
  --stroke-emphasis: 3px;
  --button-height: calc(34px * var(--density));
  --button-height-small: calc(30px * var(--density));
  --button-height-mobile: calc(36px * var(--density));
  --button-padding: var(--space-7) var(--space-13);
  --button-radius: var(--radius-small);
  --table-row-height: calc(42px * var(--density));
  --table-row-height-compact: calc(38px * var(--density));
  --table-cell-padding: var(--space-8) var(--space-12);
  --panel-padding: var(--space-20);
  --panel-padding-mobile: var(--space-15);
  --page-padding: var(--space-24) var(--space-28) var(--space-42);
  --page-padding-tablet: var(--space-20) var(--space-18) var(--space-34);
  --page-padding-mobile: var(--space-16) var(--space-12) var(--space-28);

  /* 6. Chart tokens shared with canvas through theme.js */
  --chart-panel-min-height: 337px;
  --chart-height: 270px;
  --chart-line: var(--accent);
  --chart-area: var(--accent);
  --chart-area-opacity: 0.07;
  --chart-axis: #cdd8d2;
  --chart-grid: #e8eeea;
  --chart-label: var(--muted);
  --chart-font-size: var(--font-size-meta);
  --chart-line-width: 2;
  --chart-symbol-size: 6;
  --chart-tooltip-bg: var(--surface);
  --chart-tooltip-text: var(--text);
  --chart-tooltip-border: var(--border);
  --chart-grid-left: 38;
  --chart-grid-right: 18;
  --chart-grid-top: 18;
  --chart-grid-bottom: 33;
}

/* CSS computes font lengths for the canvas adapter (including rem/em/calc). */
.theme-chart-probe { font-size: var(--chart-font-size); }


/* Shared list content variants; normal row density stays in the table tokens. */
:root {
  --list-cover-size: 45px;
  --list-title-max: 270px;
  --list-title-multiline-height: 40px;
  --list-title-multiline-line-height: 20px;
}