/* Haim OS — единственный источник цвета, размера и тени. Язык и причины: memory/DESIGN.md. */

:root {
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "SF Pro Display", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 40px;
  --text-number: 64px;
  --text-phrase: clamp(28px, 2.9vw, 44px);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-display: -0.022em;
  --tracking-caps: 0.06em;

  --hit: 44px;
  --control-h: 36px;
  --line-hit: 20px;
  --side-w: 272px;
  --rail-w: 80px;
  --content-max: 1240px;
  --spark-w: 128px;
  --spark-h: 40px;
  --dot: 10px;
  --strip: 3px;
  --focus-width: 2px;
  --press-shift: 2px;

  --text-2xs: 11px;
  --inset: 3px;
  --pin: 8px;
  --mark: 28px;
  --count: 22px;
  --count-sm: 18px;
  --badge-h: 26px;
  --org-h: 56px;
  --row-h: 76px;
  --rail-item: 52px;
  --search-w: 240px;
  --clinic-badge-w: 150px;
  --btn-yes-w: 132px;
  --btn-w: 104px;
  --chart-h: 200px;
  --mini-chart-h: 56px;
  --meter-h: 6px;
  --popover-w: 320px;

  --motion-press: 70ms;
  --motion-release: 180ms;
  --motion-fast: 160ms;
  --motion-base: 260ms;
  --motion-slow: 420ms;
  --motion-draw: 760ms;
  --motion-chart: 1100ms;
  --motion-stagger: 70ms;
  --motion-breath: 2200ms;
  --motion-daylight: 60s;
  --ease-out: cubic-bezier(0.16, 0.84, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --ease-press: cubic-bezier(0.3, 0, 0.3, 1);
  --rise: 8px;
  --ripple-scale: 2.6;
}

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-page: #110f10;
  --color-bg-shell: #1a1819;
  --color-surface: #232122;
  --color-surface-top: #2a2829;
  --color-raised: #2e2c2d;
  --color-raised-top: #383637;
  --color-well: #141213;
  --color-hover: rgba(255, 255, 255, 0.035);

  --color-text-primary: #f5f3f1;
  --color-text-muted: #c4bfbc;
  --color-text-secondary: #aca8a9;

  --color-accent: #ccb654;
  --color-accent-top: #e0cc72;
  --color-accent-bottom: #b09a3e;
  --color-accent-text: #d4be5c;
  --color-on-accent: #1d1806;
  --color-accent-engrave: rgba(255, 255, 255, 0.35);
  --color-focus: #ccb654;
  --color-meter: #ccb654;
  --color-sheen: rgba(255, 255, 255, 0.3);
  --color-sheen-soft: rgba(255, 255, 255, 0.035);
  --color-ambient: rgba(255, 236, 204, 0.045);

  --color-signal-red: #e7979b;
  --color-signal-red-bg: rgba(231, 151, 155, 0.13);
  --color-signal-red-ring: rgba(231, 151, 155, 0.32);
  --color-signal-amber: #e0a35e;
  --color-signal-amber-bg: rgba(224, 163, 94, 0.13);
  --color-signal-amber-ring: rgba(224, 163, 94, 0.32);
  --color-signal-green: #7fb894;
  --color-signal-green-bg: rgba(127, 184, 148, 0.12);
  --color-signal-green-ring: rgba(127, 184, 148, 0.3);
  --color-signal-grey: #aca8a9;
  --color-signal-grey-bg: rgba(172, 168, 169, 0.1);
  --color-signal-grey-ring: rgba(172, 168, 169, 0.26);

  --color-alert: #cc3a42;
  --color-on-alert: #ffffff;

  --color-chart-line: #ccb654;
  --color-chart-floor: rgba(245, 243, 241, 0.55);
  --color-chart-grid: rgba(255, 255, 255, 0.05);
  --color-chart-soft: #c4bfbc;

  --mix-light: #ffffff;
  --mix-dark: #000000;

  --line-dark: rgba(0, 0, 0, 0.5);
  --line-light: rgba(255, 255, 255, 0.045);

  --fill-side: linear-gradient(180deg, #252324 0%, #1f1d1e 100%);
  --fill-plate: linear-gradient(180deg, #2a2829 0%, #232122 100%);
  --fill-raised: linear-gradient(180deg, #3a3839 0%, #2e2c2d 100%);
  --fill-raised-hover: linear-gradient(180deg, #403e3f 0%, #333132 100%);
  --fill-pressed: linear-gradient(180deg, #232122 0%, #282627 100%);
  --fill-accent: linear-gradient(180deg, #e0cc72 0%, #ccb654 48%, #b09a3e 100%);
  --fill-accent-hover: linear-gradient(180deg, #e6d37c 0%, #d3bd5c 48%, #b8a144 100%);
  --fill-accent-pressed: linear-gradient(180deg, #b09a3e 0%, #c2ab4c 100%);

  --shadow-side: inset -1px 0 0 rgba(0, 0, 0, 0.5), inset -2px 0 0 rgba(255, 255, 255, 0.025);
  --shadow-plate: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.55), 0 4px 10px -3px rgba(0, 0, 0, 0.55);
  --shadow-pressed: inset 0 3px 6px rgba(0, 0, 0, 0.66), inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-well: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.55), 0 6px 14px -5px rgba(0, 0, 0, 0.65);
  --shadow-accent-pressed: inset 0 3px 6px rgba(60, 45, 0, 0.52), 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-dot: inset 0 -1px 1px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.5);
  --shadow-badge: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-count: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 1px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
  color-scheme: light;

  --color-bg-page: #e9e5df;
  --color-bg-shell: #f1eee9;
  --color-surface: #f8f6f2;
  --color-surface-top: #fdfcfa;
  --color-raised: #f3f0eb;
  --color-raised-top: #ffffff;
  --color-well: #e4e0d9;
  --color-hover: rgba(40, 30, 20, 0.04);

  --color-text-primary: #1d1b1a;
  --color-text-muted: #45413e;
  --color-text-secondary: #5f5a57;

  --color-accent: #ccb654;
  --color-accent-top: #e3cf73;
  --color-accent-bottom: #b39c40;
  --color-accent-text: #6e5a13;
  --color-on-accent: #1d1806;
  --color-accent-engrave: rgba(255, 255, 255, 0.45);
  --color-focus: #6e5a13;
  --color-meter: #8a7320;
  --color-sheen: rgba(255, 255, 255, 0.4);
  --color-sheen-soft: rgba(255, 255, 255, 0.45);
  --color-ambient: rgba(255, 252, 244, 0.6);

  --color-signal-red: #a8323a;
  --color-signal-red-bg: rgba(168, 50, 58, 0.08);
  --color-signal-red-ring: rgba(168, 50, 58, 0.26);
  --color-signal-amber: #7f5110;
  --color-signal-amber-bg: rgba(178, 120, 30, 0.1);
  --color-signal-amber-ring: rgba(127, 81, 16, 0.28);
  --color-signal-green: #29653f;
  --color-signal-green-bg: rgba(41, 101, 63, 0.08);
  --color-signal-green-ring: rgba(41, 101, 63, 0.26);
  --color-signal-grey: #5f5a57;
  --color-signal-grey-bg: rgba(95, 90, 87, 0.07);
  --color-signal-grey-ring: rgba(95, 90, 87, 0.22);

  --color-alert: #c33a41;
  --color-on-alert: #ffffff;

  --color-chart-line: #84701f;
  --color-chart-floor: rgba(29, 27, 26, 0.6);
  --color-chart-grid: rgba(29, 27, 26, 0.06);
  --color-chart-soft: #45413e;

  --mix-light: #ffffff;
  --mix-dark: #000000;

  --line-dark: rgba(60, 45, 30, 0.14);
  --line-light: rgba(255, 255, 255, 0.85);

  --fill-side: linear-gradient(180deg, #f6f3ef 0%, #efebe5 100%);
  --fill-plate: linear-gradient(180deg, #fdfcfa 0%, #f6f3ef 100%);
  --fill-raised: linear-gradient(180deg, #ffffff 0%, #f0ece6 100%);
  --fill-raised-hover: linear-gradient(180deg, #ffffff 0%, #f5f2ed 100%);
  --fill-pressed: linear-gradient(180deg, #e6e2db 0%, #ece8e2 100%);
  --fill-accent: linear-gradient(180deg, #e3cf73 0%, #ccb654 48%, #b39c40 100%);
  --fill-accent-hover: linear-gradient(180deg, #e9d67e 0%, #d3bd5c 48%, #baa246 100%);
  --fill-accent-pressed: linear-gradient(180deg, #b39c40 0%, #c4ad4d 100%);

  --shadow-side: inset -1px 0 0 rgba(60, 45, 30, 0.1), inset -2px 0 0 rgba(255, 255, 255, 0.7);
  --shadow-plate: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(60, 45, 30, 0.06), 0 1px 2px rgba(60, 45, 30, 0.1), 0 16px 36px -18px rgba(60, 45, 30, 0.35);
  --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(60, 45, 30, 0.1), 0 1px 1px rgba(60, 45, 30, 0.14), 0 3px 8px -3px rgba(60, 45, 30, 0.22);
  --shadow-pressed: inset 0 3px 5px rgba(60, 45, 30, 0.22), inset 0 0 0 1px rgba(60, 45, 30, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-well: inset 0 2px 3px rgba(60, 45, 30, 0.14), inset 0 0 0 1px rgba(60, 45, 30, 0.05), 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(90, 70, 0, 0.2), 0 1px 1px rgba(60, 45, 30, 0.2), 0 6px 14px -6px rgba(90, 70, 0, 0.45);
  --shadow-accent-pressed: inset 0 3px 6px rgba(90, 70, 0, 0.42), 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-dot: inset 0 -1px 1px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(60, 45, 30, 0.25);
  --shadow-badge: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-count: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 1px rgba(60, 45, 30, 0.3);
}