/* ==========================================================================
   Скинове. Всеки скин е набор от CSS променливи върху <html data-skin="…">.
   Компонентите в app.css използват само тези променливи.
   ========================================================================== */

:root,
[data-skin="blush"] {
  --bg: #FBF3F1;
  --surface: #FFFFFF;
  --surface-2: #FBF3F1;
  --ink: #3B1F2B;
  --ink-2: #5A3A46;
  --muted: #7E5F69;
  --line: #EED9DE;
  --line-soft: #F5E6EA;
  --accent: #C2416B;
  --on-accent: #FFFFFF;
  --accent-soft: #F6DCE3;
  --hero: #3B1F2B;
  --on-hero: #FBF3F1;
  --hero-muted: #F2B8C8;
  --nav-bg: #FFFFFF;
  --nav-ink: #5A3A46;
  --nav-active-bg: #F6DCE3;
  --nav-active-ink: #3B1F2B;
  --tab-bg: #FFFFFF;
  --tab-active: var(--accent);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --display-weight: 500;
  --display-em-style: italic;
  --display-case: none;
  --display-tracking: -0.01em;
  --time-font: var(--font-display);
  --time-style: italic;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 24px;
  --check-radius: 50%;
  --bw: 1px;
  --card-border: var(--line);
  --shadow: none;
  --shadow-pop: 0 16px 40px rgba(59, 31, 43, 0.18);
  --chip-border: transparent;
  --tilt: 0deg;
}

[data-skin="lilac"] {
  --bg: #F5F2FC;
  --surface: #FFFFFF;
  --surface-2: #F5F2FC;
  --ink: #251A3A;
  --ink-2: #4A3D60;
  --muted: #645878;
  --line: #E4DCF3;
  --line-soft: #EFEAF8;
  --accent: #6B3FD4;
  --on-accent: #FFFFFF;
  --accent-soft: #E6DDFB;
  --hero: #FFF0A8;
  --on-hero: #251A3A;
  --hero-muted: #5C4A00;
  --nav-bg: #FFFFFF;
  --nav-ink: #4A3D60;
  --nav-active-bg: #251A3A;
  --nav-active-ink: #FFFFFF;
  --tab-bg: #251A3A;
  --tab-active: #FFFFFF;

  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Onest', system-ui, sans-serif;
  --display-weight: 600;
  --display-em-style: normal;
  --display-case: none;
  --display-tracking: -0.03em;
  --time-font: var(--font-body);
  --time-style: normal;

  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 30px;
  --check-radius: 9px;
  --bw: 0px;
  --card-border: transparent;
  --shadow: none;
  --shadow-pop: 0 16px 40px rgba(37, 26, 58, 0.22);
  --chip-border: transparent;
  --tilt: 0deg;
}

[data-skin="cherry"] {
  --bg: #FFF1F5;
  --surface: #FFFFFF;
  --surface-2: #FFF1F5;
  --ink: #1A0E14;
  --ink-2: #1A0E14;
  --muted: #5C3A49;
  --line: #1A0E14;
  --line-soft: #F2D5DF;
  --accent: #FF4F9A;
  --on-accent: #1A0E14;
  --accent-soft: #FFC2DD;
  --accent-text: #B80F57;
  --hero: #FFE15A;
  --on-hero: #1A0E14;
  --hero-muted: #1A0E14;
  --nav-bg: #FF4F9A;
  --nav-ink: #1A0E14;
  --nav-active-bg: #FFFFFF;
  --nav-active-ink: #1A0E14;
  --tab-bg: #FF4F9A;
  --tab-active: #1A0E14;

  --font-display: 'Dela Gothic One', system-ui, sans-serif;
  --font-body: 'Golos Text', system-ui, sans-serif;
  --display-weight: 400;
  --display-em-style: normal;
  --display-case: uppercase;
  --display-tracking: 0;
  --time-font: var(--font-display);
  --time-style: normal;

  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 22px;
  --check-radius: 8px;
  --bw: 2.5px;
  --card-border: #1A0E14;
  --shadow: 5px 5px 0 #1A0E14;
  --shadow-pop: 8px 8px 0 #1A0E14;
  --chip-border: #1A0E14;
  --tilt: -1.5deg;
}

[data-skin="mocha"] {
  color-scheme: dark;
  --bg: #1C1418;
  --surface: #251A20;
  --surface-2: #2E2128;
  --ink: #F6E9EC;
  --ink-2: #E3D2D8;
  --muted: #BFA6AF;
  --line: #3E2D36;
  --line-soft: #33242C;
  --accent: #E8A99B;
  --on-accent: #2A1A1E;
  --accent-soft: #3A2A31;
  --hero: #E8A99B;
  --on-hero: #2A1A1E;
  --hero-muted: #4A2A24;
  --nav-bg: #160F13;
  --nav-ink: #CDB7BF;
  --nav-active-bg: #2E2128;
  --nav-active-ink: #F6E9EC;
  --tab-bg: #160F13;
  --tab-active: var(--accent);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --display-weight: 500;
  --display-em-style: italic;
  --display-case: none;
  --display-tracking: 0;
  --time-font: var(--font-display);
  --time-style: normal;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --check-radius: 50%;
  --bw: 1px;
  --card-border: var(--line-soft);
  --shadow: none;
  --shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.5);
  --chip-border: transparent;
  --tilt: 0deg;
}

[data-skin="peach"] {
  --bg: #FFF8F3;
  --surface: #FFFFFF;
  --surface-2: #FFF1E8;
  --ink: #3D2B26;
  --ink-2: #6B5048;
  --muted: #7A5E54;
  --line: #F1E1D6;
  --line-soft: #F7ECE4;
  --accent: #B5532F;
  --on-accent: #FFFFFF;
  --accent-soft: #FFD8C2;
  --hero: #DCE8D9;
  --on-hero: #2F432C;
  --hero-muted: #3B5237;
  --nav-bg: #FFF8F3;
  --nav-ink: #6B5048;
  --nav-active-bg: #FFD8C2;
  --nav-active-ink: #3D2B26;
  --tab-bg: #FFFFFF;
  --tab-active: #3D2B26;

  --font-display: 'Yeseva One', Georgia, serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --display-weight: 400;
  --display-em-style: normal;
  --display-case: none;
  --display-tracking: 0;
  --time-font: var(--font-body);
  --time-style: normal;

  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 28px;
  --check-radius: 50%;
  --bw: 0px;
  --card-border: transparent;
  --shadow: none;
  --shadow-pop: 0 18px 40px rgba(61, 43, 38, 0.16);
  --chip-border: transparent;
  --tilt: 0deg;
}