/*
 * Slotivo PR4 — ACCOMMODATION KOSTUR 2 design tokens.
 *
 * Defines:
 *   1. Color, spacing, font CSS variables, scoped per STIL via the
 *      `data-slotivo-stil="S1|S2|S3|S4"` attribute on the root element.
 *   2. A focused set of utility classes (.bg-on-surface, .text-primary,
 *      ...) that map to those variables, scoped under
 *      `body[class*='slotivo-kostur-b']` so they cannot leak into the
 *      rest of the app.
 *
 * Why scoped utilities instead of native Tailwind v4 tokens?
 *   The original HTML uses ~50 Material-style color tokens and a
 *   per-KOSTUR spacing scale. Registering them globally in
 *   `app/globals.css` would pollute every other page. Scoping on the
 *   body class keeps everything isolated and preserves the original
 *   class names verbatim (`bg-on-surface`, `text-primary`, ...) so the
 *   markup matches the source HTML 1:1.
 *
 * Per-STIL theming: only the COLOR section changes between stilovi.
 * Spacing + fonts + utility shape stay identical.
 */

/* -------------------------------------------------------------------------
 * 1. KOSTUR 2 — STIL 1 (azure-stay) defaults
 * -------------------------------------------------------------------------
 * The default `[data-slotivo-stil="S1"]` block sets every variable.
 * S2/S3/S4 overrides below only redefine the colors that actually differ.
 */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'],
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) {
  /* surface scale (cool off-white) */
  --surface-dim: #d8dadb;
  --surface: #f8fafb;
  --background: #f8fafb;
  --surface-variant: #e1e3e4;
  --surface-bright: #f8fafb;
  --surface-container: #eceeef;
  --surface-container-low: #f2f4f5;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #e6e8e9;
  --surface-container-highest: #e1e3e4;
  --surface-tint: #326380;

  /* on-surface (text on light) */
  --on-surface: #191c1d;
  --on-surface-variant: #41484d;
  --on-background: #191c1d;

  /* outlines */
  --outline: #71787e;
  --outline-variant: #c1c7cd;

  /* primary (deep ocean blue) */
  --primary: #0c4661;
  --primary-fixed: #c6e7ff;
  --primary-fixed-dim: #9dcded;
  --on-primary: #ffffff;
  --on-primary-fixed: #001e2d;
  --on-primary-fixed-variant: #154c67;
  --primary-container: #2c5e7a;
  --on-primary-container: #a6d6f7;

  /* secondary (warm sand) */
  --secondary: #6b5c4c;
  --on-secondary: #ffffff;
  --secondary-fixed: #f4dfcb;
  --on-secondary-fixed: #241a0e;
  --secondary-fixed-dim: #d7c3b0;
  --on-secondary-fixed-variant: #524436;
  --secondary-container: #f4dfcb;
  --on-secondary-container: #716252;

  /* tertiary */
  --tertiary: #1a465d;
  --on-tertiary: #ffffff;
  --tertiary-fixed: #c5e7ff;
  --on-tertiary-fixed: #001e2d;
  --tertiary-fixed-dim: #a2cce7;
  --on-tertiary-fixed-variant: #204b62;
  --tertiary-container: #345e76;
  --on-tertiary-container: #acd6f2;

  /* inverse */
  --inverse-surface: #2e3132;
  --inverse-on-surface: #eff1f2;
  --inverse-primary: #9dcded;

  /* error */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
}

/* -------------------------------------------------------------------------
 * 1b. KOSTUR 2 — STIL 2 (sand-coast)
 * Deeper ocean primary, same sand secondary.
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] {
  /* surface scale (cool off-white) */
  --surface-dim: #d8dadb;
  --surface: #f8fafb;
  --background: #f8fafb;
  --surface-variant: #e1e3e4;
  --surface-bright: #f8fafb;
  --surface-container: #eceeef;
  --surface-container-low: #f2f4f5;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #e6e8e9;
  --surface-container-highest: #e1e3e4;
  --surface-tint: #326380;

  /* on-surface (text on light) */
  --on-surface: #191c1d;
  --on-surface-variant: #41484d;
  --on-background: #191c1d;

  /* outlines */
  --outline: #71787e;
  --outline-variant: #c1c7cd;

  /* primary (darker ocean) */
  --primary: #002f44;
  --primary-fixed: #c6e7ff;
  --primary-fixed-dim: #9dcded;
  --on-primary: #ffffff;
  --on-primary-fixed: #001e2d;
  --on-primary-fixed-variant: #154c67;
  --primary-container: #0c4661;
  --on-primary-container: #84b3d3;

  /* secondary (warm sand) */
  --secondary: #6b5c4c;
  --on-secondary: #ffffff;
  --secondary-fixed: #f4dfcb;
  --on-secondary-fixed: #241a0d;
  --secondary-fixed-dim: #d7c3b0;
  --on-secondary-fixed-variant: #524435;
  --secondary-container: #f1dcc8;
  --on-secondary-container: #6f6050;

  /* tertiary */
  --tertiary: #002f44;
  --on-tertiary: #ffffff;
  --tertiary-fixed: #c5e7ff;
  --on-tertiary-fixed: #001e2d;
  --tertiary-fixed-dim: #a3cce8;
  --on-tertiary-fixed-variant: #204b62;
  --tertiary-container: #1a465d;
  --on-tertiary-container: #8bb3ce;

  /* inverse */
  --inverse-surface: #2e3132;
  --inverse-on-surface: #eff1f2;
  --inverse-primary: #9dcded;

  /* error */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
}

/* -------------------------------------------------------------------------
 * 1c. KOSTUR 2 — STIL 3 (sea-view-stay)
 * Vibrant azure blue primary, golden secondary.
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] {
  /* surface scale (bright white/cool) */
  --surface-dim: #dce8ef;
  --surface: #ffffff;
  --background: #f7fbfd;
  --surface-variant: #dce8ef;
  --surface-bright: #ffffff;
  --surface-container: #eef6fa;
  --surface-container-low: #eef6fa;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #e3f0f7;
  --surface-container-highest: #d4e8f2;
  --surface-tint: #1a7cab;

  /* on-surface (text on light) */
  --on-surface: #1a2b35;
  --on-surface-variant: #4a5f6d;
  --on-background: #1a2b35;

  /* outlines */
  --outline: #6b8a9e;
  --outline-variant: #c5d8e4;

  /* primary (vibrant azure) */
  --primary: #0e6ba8;
  --primary-fixed: #d4efff;
  --primary-fixed-dim: #a8daf5;
  --on-primary: #ffffff;
  --on-primary-fixed: #001e2d;
  --on-primary-fixed-variant: #0e6ba8;
  --primary-container: #1a7cab;
  --on-primary-container: #b8e4f8;

  /* secondary (golden sand) */
  --secondary: #c9a66b;
  --on-secondary: #ffffff;
  --secondary-fixed: #f4e4c8;
  --on-secondary-fixed: #2a1f0e;
  --secondary-fixed-dim: #e8c99b;
  --on-secondary-fixed-variant: #5c4a32;
  --secondary-container: #f4e4c8;
  --on-secondary-container: #7a6344;

  /* tertiary */
  --tertiary: #085a8a;
  --on-tertiary: #ffffff;
  --tertiary-fixed: #d4efff;
  --on-tertiary-fixed: #001e2d;
  --tertiary-fixed-dim: #9ecfe8;
  --on-tertiary-fixed-variant: #085a8a;
  --tertiary-container: #1a7cab;
  --on-tertiary-container: #8ec9ea;

  /* inverse */
  --inverse-surface: #1a2b35;
  --inverse-on-surface: #f7fbfd;
  --inverse-primary: #a8daf5;

  /* error */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
}

/* -------------------------------------------------------------------------
 * 1d. KOSTUR 2 — STIL 4 (warm-coast)
 * Warm cream/charcoal palette with muted secondary.
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] {
  /* surface scale (warm off-white) */
  --surface-dim: #e0d9d4;
  --surface: #fff8f4;
  --background: #fff8f4;
  --surface-variant: #e8e1dd;
  --surface-bright: #fff8f4;
  --surface-container: #f4ece8;
  --surface-container-low: #faf2ed;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #eee7e2;
  --surface-container-highest: #e8e1dd;
  --surface-tint: #5f5e5d;

  /* on-surface (text on light) */
  --on-surface: #1e1b19;
  --on-surface-variant: #454844;
  --on-background: #1e1b19;

  /* outlines */
  --outline: #757873;
  --outline-variant: #c5c7c2;

  /* primary (charcoal) */
  --primary: #171817;
  --primary-fixed: #e4e2e0;
  --primary-fixed-dim: #c8c6c4;
  --on-primary: #ffffff;
  --on-primary-fixed: #1b1c1b;
  --on-primary-fixed-variant: #474745;
  --primary-container: #2c2c2b;
  --on-primary-container: #949391;

  /* secondary (muted stone) */
  --secondary: #5f5e5b;
  --on-secondary: #ffffff;
  --secondary-fixed: #e5e2dd;
  --on-secondary-fixed: #1c1c19;
  --secondary-fixed-dim: #c9c6c2;
  --on-secondary-fixed-variant: #474743;
  --secondary-container: #e5e2dd;
  --on-secondary-container: #656461;

  /* tertiary (deep warm brown) */
  --tertiary: #20160a;
  --on-tertiary: #ffffff;
  --tertiary-fixed: #f4dfcb;
  --on-tertiary-fixed: #241a0e;
  --tertiary-fixed-dim: #d7c3b0;
  --on-tertiary-fixed-variant: #524436;
  --tertiary-container: #362a1d;
  --on-tertiary-container: #a2907f;

  /* inverse */
  --inverse-surface: #33302d;
  --inverse-on-surface: #f7efeb;
  --inverse-primary: #c8c6c4;

  /* error */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
}

/* -------------------------------------------------------------------------
 * 2. Spacing scale (shared by all stilovi in K2)
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] {
  --margin-mobile: 20px;
  --margin-desktop: 64px;
  --container-max: 1600px;
  --gutter: 24px;
  --unit: 8px;
}

/* S4 overrides (wider gutter, different mobile margin) */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] {
  --margin-mobile: 24px;
  --gutter: 32px;
  --container-max: 1280px;
}

/* -------------------------------------------------------------------------
 * 3. Utility classes — background colors
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'].bg-background {
  background-color: var(--background) !important;
}
body[class*='slotivo-kostur-b'].text-on-surface {
  color: var(--on-surface) !important;
}
body[class*='slotivo-kostur-b'].text-on-background {
  color: var(--on-background) !important;
}

body[class*='slotivo-kostur-b'] .bg-background        { background-color: var(--background); }
body[class*='slotivo-kostur-b'] .bg-surface           { background-color: var(--surface); }
body[class*='slotivo-kostur-b'] .bg-surface-dim       { background-color: var(--surface-dim); }
body[class*='slotivo-kostur-b'] .bg-surface-variant   { background-color: var(--surface-variant); }
body[class*='slotivo-kostur-b'] .bg-surface-bright    { background-color: var(--surface-bright); }
body[class*='slotivo-kostur-b'] .bg-surface-container { background-color: var(--surface-container); }
body[class*='slotivo-kostur-b'] .bg-surface-container-low     { background-color: var(--surface-container-low); }
body[class*='slotivo-kostur-b'] .bg-surface-container-lowest  { background-color: var(--surface-container-lowest); }
body[class*='slotivo-kostur-b'] .bg-surface-container-high    { background-color: var(--surface-container-high); }
body[class*='slotivo-kostur-b'] .bg-surface-container-highest { background-color: var(--surface-container-highest); }
body[class*='slotivo-kostur-b'] .bg-on-surface         { background-color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .bg-on-surface-variant { background-color: var(--on-surface-variant); }
body[class*='slotivo-kostur-b'] .bg-primary            { background-color: var(--primary); }
body[class*='slotivo-kostur-b'] .bg-primary-container  { background-color: var(--primary-container); }
body[class*='slotivo-kostur-b'] .bg-secondary          { background-color: var(--secondary); }
body[class*='slotivo-kostur-b'] .bg-secondary-container { background-color: var(--secondary-container); }

body[class*='slotivo-kostur-b'] .bg-primary\/10        { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
body[class*='slotivo-kostur-b'] .hover\:bg-primary\/10:hover { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }

/* opacity-modifier helpers */
body[class*='slotivo-kostur-b'] .bg-background\/80     { background-color: color-mix(in srgb, var(--background) 80%, transparent); }
body[class*='slotivo-kostur-b'] .bg-background\/90     { background-color: color-mix(in srgb, var(--background) 90%, transparent); }
body[class*='slotivo-kostur-b'] .bg-background\/95     { background-color: color-mix(in srgb, var(--background) 95%, transparent); }
body[class*='slotivo-kostur-b'] .bg-surface\/90       { background-color: color-mix(in srgb, var(--surface) 90%, transparent); }
body[class*='slotivo-kostur-b'] .bg-surface\/95       { background-color: color-mix(in srgb, var(--surface) 95%, transparent); }
body[class*='slotivo-kostur-b'] .bg-primary\/20        { background-color: color-mix(in srgb, var(--primary) 20%, transparent); }
body[class*='slotivo-kostur-b'] .bg-secondary\/10      { background-color: color-mix(in srgb, var(--secondary) 10%, transparent); }
body[class*='slotivo-kostur-b'] .bg-surface-container-highest\/50 { background-color: color-mix(in srgb, var(--surface-container-highest) 50%, transparent); }
body[class*='slotivo-kostur-b'] .bg-surface-container-low\/80     { background-color: color-mix(in srgb, var(--surface-container-low) 80%, transparent); }

/* -------------------------------------------------------------------------
 * 4. Utility classes — text colors
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .text-on-surface          { color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .text-on-surface-variant  { color: var(--on-surface-variant); }
body[class*='slotivo-kostur-b'] .text-on-background       { color: var(--on-background); }
body[class*='slotivo-kostur-b'] .text-primary             { color: var(--primary); }
body[class*='slotivo-kostur-b'] .text-secondary           { color: var(--secondary); }
body[class*='slotivo-kostur-b'] .text-outline             { color: var(--outline); }
body[class*='slotivo-kostur-b'] .text-outline-variant     { color: var(--outline-variant); }
body[class*='slotivo-kostur-b'] .text-background          { color: var(--background); }
body[class*='slotivo-kostur-b'] .text-on-primary          { color: var(--on-primary); }
body[class*='slotivo-kostur-b'] .text-on-primary-container { color: var(--on-primary-container); }
body[class*='slotivo-kostur-b'] .text-on-secondary-container { color: var(--on-secondary-container); }
body[class*='slotivo-kostur-b'] .text-error                 { color: var(--error); }

body[class*='slotivo-kostur-b'] .text-on-surface-variant\/50 { color: color-mix(in srgb, var(--on-surface-variant) 50%, transparent); }

/* placeholder color */
body[class*='slotivo-kostur-b'] .placeholder\:text-outline-variant::placeholder {
  color: var(--outline-variant);
}
body[class*='slotivo-kostur-b'] .placeholder\:text-on-surface-variant\/50::placeholder {
  color: color-mix(in srgb, var(--on-surface-variant) 50%, transparent);
}

/* -------------------------------------------------------------------------
 * 5. Utility classes — borders
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .border-outline         { border-color: var(--outline); }
body[class*='slotivo-kostur-b'] .border-outline-variant { border-color: var(--outline-variant); }
body[class*='slotivo-kostur-b'] .border-on-surface      { border-color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .border-primary         { border-color: var(--primary); }
body[class*='slotivo-kostur-b'] .border-secondary       { border-color: var(--secondary); }

body[class*='slotivo-kostur-b'] .border-outline-variant\/20 { border-color: color-mix(in srgb, var(--outline-variant) 20%, transparent); }
body[class*='slotivo-kostur-b'] .border-outline-variant\/30 { border-color: color-mix(in srgb, var(--outline-variant) 30%, transparent); }
body[class*='slotivo-kostur-b'] .border-outline-variant\/50 { border-color: color-mix(in srgb, var(--outline-variant) 50%, transparent); }
body[class*='slotivo-kostur-b'] .border-outline-variant\/60 { border-color: color-mix(in srgb, var(--outline-variant) 60%, transparent); }
body[class*='slotivo-kostur-b'] .border-primary\/10         { border-color: color-mix(in srgb, var(--primary) 10%, transparent); }
body[class*='slotivo-kostur-b'] .border-primary\/20         { border-color: color-mix(in srgb, var(--primary) 20%, transparent); }
body[class*='slotivo-kostur-b'] .border-primary\/30         { border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
body[class*='slotivo-kostur-b'] .border-primary\/50         { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
body[class*='slotivo-kostur-b'] .border-secondary\/20       { border-color: color-mix(in srgb, var(--secondary) 20%, transparent); }
body[class*='slotivo-kostur-b'] .border-secondary\/30       { border-color: color-mix(in srgb, var(--secondary) 30%, transparent); }

body[class*='slotivo-kostur-b'] .hover\:border-outline:hover         { border-color: var(--outline); }
body[class*='slotivo-kostur-b'] .hover\:border-outline-variant:hover { border-color: var(--outline-variant); }
body[class*='slotivo-kostur-b'] .hover\:border-on-surface:hover      { border-color: var(--on-surface); }

body[class*='slotivo-kostur-b'] .focus\:border-on-surface:focus { border-color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .focus\:border-primary:focus   { border-color: var(--primary); }
body[class*='slotivo-kostur-b'] .focus\:ring-primary:focus     { --tw-ring-color: var(--primary); }
body[class*='slotivo-kostur-b'] .focus\:ring-secondary:focus   { --tw-ring-color: var(--secondary); }

/* -------------------------------------------------------------------------
 * 6. Utility classes — selection / hover / typography
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .hover\:text-on-surface:hover     { color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .hover\:text-outline:hover        { color: var(--outline); }
body[class*='slotivo-kostur-b'] .hover\:text-primary:hover        { color: var(--primary); }
body[class*='slotivo-kostur-b'] .hover\:text-secondary:hover      { color: var(--secondary); }

body[class*='slotivo-kostur-b'] .hover\:bg-outline-variant:hover  { background-color: var(--outline-variant); }
body[class*='slotivo-kostur-b'] .hover\:bg-on-surface:hover       { background-color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .hover\:bg-on-surface-variant:hover { background-color: var(--on-surface-variant); }
body[class*='slotivo-kostur-b'] .hover\:text-background:hover     { color: var(--background); }
body[class*='slotivo-kostur-b'] .hover\:text-on-primary:hover     { color: var(--on-primary); }

body[class*='slotivo-kostur-b'] .selection\:bg-outline-variant ::selection { background-color: var(--outline-variant); }
body[class*='slotivo-kostur-b'] .selection\:text-on-surface ::selection { color: var(--on-surface); }
body[class*='slotivo-kostur-b'] .selection\:bg-primary-container ::selection { background-color: var(--primary-container); }
body[class*='slotivo-kostur-b'] .selection\:text-on-primary-container ::selection { color: var(--on-primary-container); }
body[class*='slotivo-kostur-b'] .selection\:bg-secondary-container ::selection { background-color: var(--secondary-container); }
body[class*='slotivo-kostur-b'] .selection\:text-on-secondary-container ::selection { color: var(--on-secondary-container); }
body[class*='slotivo-kostur-b'] .selection\:bg-surface-container-highest ::selection { background-color: var(--surface-container-highest); }

/* -------------------------------------------------------------------------
 * 7. Spacing utilities
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .px-margin-mobile  { padding-left: var(--margin-mobile);  padding-right: var(--margin-mobile); }
body[class*='slotivo-kostur-b'] .px-margin-desktop { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
body[class*='slotivo-kostur-b'] .max-w-container-max { max-width: var(--container-max); }
body[class*='slotivo-kostur-b'] .bottom-margin-mobile  { bottom: var(--margin-mobile); }
body[class*='slotivo-kostur-b'] .bottom-margin-desktop { bottom: var(--margin-desktop); }

@media (min-width: 768px) {
  body[class*='slotivo-kostur-b'] .md\:px-margin-desktop { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
  body[class*='slotivo-kostur-b'] .md\:bottom-margin-desktop { bottom: var(--margin-desktop); }
}

/* -------------------------------------------------------------------------
 * 8. Typography — font families & sizes
 *
 * S1: Playfair Display + Montserrat
 * S2: Playfair Display + Montserrat
 * S3: Playfair Display + DM Sans
 * S4: Playfair Display + Plus Jakarta Sans
 * ------------------------------------------------------------------------- */

/* S1 / default fonts */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .font-display-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .font-headline-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .font-headline-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .font-headline-sm,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .font-display-lg,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .font-headline-lg,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .font-headline-md,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .font-headline-sm {
  font-family: 'Playfair Display', Georgia, serif;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .font-body-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .font-body-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .font-label-sm,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .font-label-md,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .font-body-md,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .font-body-lg,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .font-label-sm,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .font-label-md {
  font-family: 'Montserrat', system-ui, sans-serif;
}

/* S2 fonts — Playfair Display headlines + Montserrat body */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-display-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-headline-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-headline-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-headline-sm {
  font-family: 'Playfair Display', Georgia, serif;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-body-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-body-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-label-sm,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .font-label-md {
  font-family: 'Montserrat', system-ui, sans-serif;
}

/* S3 fonts — Playfair Display headlines + DM Sans body */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-display-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-headline-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-headline-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-headline-sm {
  font-family: 'Playfair Display', Georgia, serif;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-body-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-body-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-label-sm,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .font-label-md {
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* S4 fonts — Playfair Display headlines + Plus Jakarta Sans body */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-display-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-headline-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-headline-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-headline-sm {
  font-family: 'Playfair Display', Georgia, serif;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-body-md,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-body-lg,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-label-sm,
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .font-label-md {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* S1 typography sizes (default) */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .text-display-lg,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .text-display-lg         { font-size: 64px;  line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .text-headline-lg,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .text-headline-lg        { font-size: 48px;  line-height: 1.2; font-weight: 600; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .text-headline-lg-mobile,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .text-headline-lg-mobile { font-size: 32px;  line-height: 1.2; font-weight: 600; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .text-headline-md,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .text-headline-md        { font-size: 32px;  line-height: 1.3; font-weight: 500; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .text-headline-sm,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .text-headline-sm        { font-size: 24px;  line-height: 1.4; font-weight: 500; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .text-body-lg,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .text-body-lg            { font-size: 18px;  line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .text-body-md,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .text-body-md            { font-size: 16px;  line-height: 1.5; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .text-label-md,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .text-label-md           { font-size: 14px;  line-height: 1.2; letter-spacing: 0.05em;  font-weight: 600; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .text-label-sm,
body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .text-label-sm           { font-size: 12px;  line-height: 1.2; font-weight: 500; }

/* S2 typography sizes */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-display-lg          { font-size: 64px;  line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-headline-lg         { font-size: 48px;  line-height: 1.2; font-weight: 600; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-headline-lg-mobile  { font-size: 32px;  line-height: 1.2; font-weight: 600; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-headline-md         { font-size: 32px;  line-height: 1.3; font-weight: 500; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-headline-sm         { font-size: 24px;  line-height: 1.4; font-weight: 500; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-body-lg             { font-size: 18px;  line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-body-md             { font-size: 16px;  line-height: 1.5; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-label-md            { font-size: 14px;  line-height: 1.2; letter-spacing: 0.05em;  font-weight: 600; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .text-label-sm            { font-size: 12px;  line-height: 1.2; font-weight: 500; }

/* S3 typography sizes */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-display-lg          { font-size: 64px;  line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-headline-lg         { font-size: 48px;  line-height: 1.22; font-weight: 500; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-headline-lg-mobile  { font-size: 32px;  line-height: 1.25; font-weight: 500; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-headline-md         { font-size: 32px;  line-height: 1.35; font-weight: 500; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-headline-sm         { font-size: 24px;  line-height: 1.4; font-weight: 500; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-body-lg             { font-size: 18px;  line-height: 1.65; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-body-md             { font-size: 16px;  line-height: 1.55; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-label-md            { font-size: 14px;  line-height: 1.3; letter-spacing: 0.04em;  font-weight: 600; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .text-label-sm            { font-size: 12px;  line-height: 1.3; font-weight: 500; }

/* S4 typography sizes */
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-display-lg          { font-size: 64px;  line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-display-lg-mobile   { font-size: 40px;  line-height: 1.2; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-headline-lg         { font-size: 40px;  line-height: 1.2; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-headline-lg-mobile  { font-size: 32px;  line-height: 1.3; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-headline-md         { font-size: 24px;  line-height: 1.4; font-weight: 500; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-headline-sm         { font-size: 24px;  line-height: 1.4; font-weight: 500; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-body-lg             { font-size: 18px;  line-height: 1.6; letter-spacing: 0.01em; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-body-md             { font-size: 16px;  line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-label-md            { font-size: 14px;  line-height: 1.4; letter-spacing: 0.05em;  font-weight: 600; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .text-label-sm            { font-size: 12px;  line-height: 1.4; letter-spacing: 0.03em; font-weight: 500; }

@media (min-width: 768px) {
  body[class*='slotivo-kostur-b'][data-slotivo-stil='S1'] .md\:text-headline-lg,
  body[class*='slotivo-kostur-b']:not([data-slotivo-stil]) .md\:text-headline-lg { font-size: 48px; line-height: 1.2; font-weight: 600; }
  body[class*='slotivo-kostur-b'][data-slotivo-stil='S2'] .md\:text-headline-lg  { font-size: 48px; line-height: 1.2; font-weight: 600; }
  body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .md\:text-headline-lg  { font-size: 48px; line-height: 1.22; font-weight: 500; }
  body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .md\:text-headline-lg  { font-size: 40px; line-height: 1.2; font-weight: 400; }
}

/* -------------------------------------------------------------------------
 * 9. Material Symbols (used in HTML for icons)
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Custom scrollbar — S1/S2 default (light theme, cool tones) */
body[class*='slotivo-kostur-b'] ::-webkit-scrollbar         { width: 6px; }
body[class*='slotivo-kostur-b'] ::-webkit-scrollbar-track   { background: transparent; }
body[class*='slotivo-kostur-b'] ::-webkit-scrollbar-thumb   { background: var(--surface-dim); border-radius: 10px; }
body[class*='slotivo-kostur-b'] ::-webkit-scrollbar-thumb:hover { background: var(--outline); }

body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] ::-webkit-scrollbar { width: 5px; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] ::-webkit-scrollbar-track {
  background: transparent;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] ::-webkit-scrollbar-thumb {
  background: #c5d8e4;
  border-radius: 4px;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] ::-webkit-scrollbar-thumb:hover {
  background: #6b8a9e;
}

body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] ::-webkit-scrollbar { width: 5px; }
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] ::-webkit-scrollbar-track {
  background: transparent;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] ::-webkit-scrollbar-thumb {
  background: #c5c7c2;
  border-radius: 4px;
}
body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] ::-webkit-scrollbar-thumb:hover {
  background: #757873;
}

/* select reset */
body[class*='slotivo-kostur-b'] .custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
  padding-right: 1.75rem;
}

/* -------------------------------------------------------------------------
 * 10. Extra utilities used in K2 HTML markup
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-b'] .shadow-level-1 {
  box-shadow: var(--shadow-level-1, 0 20px 40px -10px rgba(25, 28, 29, 0.06));
}

body[class*='slotivo-kostur-b'] .hover\:shadow-level-1-hover:hover {
  box-shadow: var(--shadow-level-1-hover, 0 30px 50px -10px rgba(25, 28, 29, 0.10));
}

body[class*='slotivo-kostur-b'] .hover\:opacity-90:hover { opacity: 0.9; }

/* glass-nav per stil */
body[class*='slotivo-kostur-b'] .glass-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body[class*='slotivo-kostur-b'][data-slotivo-stil='S3'] .glass-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body[class*='slotivo-kostur-b'][data-slotivo-stil='S4'] .glass-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}