/* Дизайн-система «Чистий Dім» v2 — токени.
   Базова палітра з Figma (ground / ink / accent / stamp / sale) збережена, додано шкалу радіусів,
   дисплейний шрифт і «металеві» відтінки для вітрини на гачках. */
:root {
  --ground: #EEEDE6;
  --ground-2: #E6E4DB;
  --surface: #F8F7F2;
  --surface-sunken: #E2E0D8;
  --ink: #121211;
  --ink-muted: #5F5D57;
  --line: #D6D4CA;
  --line-strong: #85837B;
  --accent: #5A7BA6;
  --accent-soft: #D9E2EE;
  --on-accent: #FFFFFF;
  --accent-strong: #46658E;
  --on-accent-strong: #FFFFFF;
  --panel: #121211;
  --panel-2: #1C1C1A;
  --on-panel: #F4F3EE;
  --on-panel-muted: #A9A69C;
  --stamp: #277A42;
  --stamp-soft: #D7E8DA;
  --sale: #A23E36;
  --on-sale: #FFFFFF;
  --metal: #8C8A83;
  --shadow-sm: 0 1px 2px rgba(18,18,17,.06), 0 2px 8px rgba(18,18,17,.05);
  --shadow-md: 0 10px 30px -12px rgba(18,18,17,.22);
  --shadow-product: 0 24px 28px -16px rgba(18,18,17,0.28);
  --glass: color-mix(in srgb, var(--ground) 78%, transparent);

  /* категорійні кольори смуг на картках вітрини */
  --c-prannia: #5A7BA6;
  --c-kukhnia: #C2793E;
  --c-vanna: #3F8F8A;
  --c-prybyrannia: #8A6BB0;

  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Unbounded", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fs-display-xl: clamp(40px, 6.4vw, 92px); --fs-h1: clamp(32px, 4.2vw, 56px); --fs-h2: clamp(26px, 2.8vw, 40px); --fs-h3: 21px;
  --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-label: 12px; --fs-price: 36px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 96px;

  --radius-0: 0; --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; --radius-xl: 40px; --radius-pill: 999px;
  --border-hair: 1px; --border-floor: 4px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 150ms; --dur: 260ms; --dur-slow: 480ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #141413; --ground-2: #191918; --surface: #1E1E1C; --surface-sunken: #272725;
    --ink: #EEEDE6; --ink-muted: #A9A69C; --line: #33322F; --line-strong: #6E6C66;
    --accent: #8FA9CC; --accent-soft: #24303F; --on-accent: #111111; --accent-strong: #8FA9CC; --on-accent-strong: #111111;
    --panel: #0B0B0A; --panel-2: #161615; --on-panel: #EEEDE6; --on-panel-muted: #A9A69C;
    --stamp: #6BBF86; --stamp-soft: #1E3325; --sale: #E07A70; --on-sale: #111111; --metal: #6E6C66;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 10px 30px -12px rgba(0,0,0,.7);
    --shadow-product: 0 24px 28px -16px rgba(0,0,0,0.6);
    --c-prannia: #8FA9CC; --c-kukhnia: #E0A06A; --c-vanna: #6FC2BC; --c-prybyrannia: #B79BDB;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #141413; --ground-2: #191918; --surface: #1E1E1C; --surface-sunken: #272725;
  --ink: #EEEDE6; --ink-muted: #A9A69C; --line: #33322F; --line-strong: #6E6C66;
  --accent: #8FA9CC; --accent-soft: #24303F; --on-accent: #111111; --accent-strong: #8FA9CC; --on-accent-strong: #111111;
  --panel: #0B0B0A; --panel-2: #161615; --on-panel: #EEEDE6; --on-panel-muted: #A9A69C;
  --stamp: #6BBF86; --stamp-soft: #1E3325; --sale: #E07A70; --on-sale: #111111; --metal: #6E6C66;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 10px 30px -12px rgba(0,0,0,.7);
  --shadow-product: 0 24px 28px -16px rgba(0,0,0,0.6);
  --c-prannia: #8FA9CC; --c-kukhnia: #E0A06A; --c-vanna: #6FC2BC; --c-prybyrannia: #B79BDB;
  color-scheme: dark;
}