/*
 * Slotivo PR4 — ACCOMMODATION KOSTUR 1 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-a']` 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 1 — STIL 1 (lumi-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-a'][data-slotivo-stil='S1'],
body[class*='slotivo-kostur-a']:not([data-slotivo-stil]) {
  /* surface scale (light cream) */
  --surface-dim: #dcdad6;
  --surface: #fcf9f5;
  --background: #fcf9f5;
  --surface-variant: #e5e2de;
  --surface-bright: #fcf9f5;
  --surface-container: #f0ede9;
  --surface-container-low: #f6f3ef;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #eae8e4;
  --surface-container-highest: #e5e2de;
  --surface-tint: #5f5e5e;

  /* on-surface (text on light) */
  --on-surface: #1c1c1a;
  --on-surface-variant: #444748;
  --on-background: #1c1c1a;

  /* outlines */
  --outline: #747878;
  --outline-variant: #c4c7c7;

  /* primary (black) */
  --primary: #000000;
  --primary-fixed: #e5e2e1;
  --primary-fixed-dim: #c8c6c5;
  --on-primary: #ffffff;
  --on-primary-fixed: #1c1b1b;
  --on-primary-fixed-variant: #474746;
  --primary-container: #1c1b1b;
  --on-primary-container: #858383;

  /* secondary (bronze) */
  --secondary: #755a28;
  --on-secondary: #ffffff;
  --secondary-fixed: #ffdeaa;
  --on-secondary-fixed: #271900;
  --secondary-fixed-dim: #e6c185;
  --on-secondary-fixed-variant: #5b4313;
  --secondary-container: #fdd79a;
  --on-secondary-container: #785c2a;

  /* tertiary */
  --tertiary: #000000;
  --on-tertiary: #ffffff;
  --tertiary-fixed: #e4e2dd;
  --on-tertiary-fixed: #1b1c19;
  --tertiary-fixed-dim: #c8c6c2;
  --on-tertiary-fixed-variant: #474744;
  --tertiary-container: #1b1c19;
  --on-tertiary-container: #848480;

  /* inverse */
  --inverse-surface: #31302e;
  --inverse-on-surface: #f3f0ec;
  --inverse-primary: #c8c6c5;

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

/* -------------------------------------------------------------------------
 * 1b. KOSTUR 1 — STIL 2 (business-stay)
 * Cool slate/blue corporate palette.
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] {
  /* surface scale (cool white) */
  --surface-dim: #e2e8f0;
  --surface: #ffffff;
  --background: #f8fafc;
  --surface-variant: #e2e8f0;
  --surface-bright: #ffffff;
  --surface-container: #eef2f6;
  --surface-container-low: #f1f5f9;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #e2e8f0;
  --surface-container-highest: #cbd5e1;
  --surface-tint: #1e3a5f;

  /* on-surface (text on light) */
  --on-surface: #0f172a;
  --on-surface-variant: #475569;
  --on-background: #0f172a;

  /* outlines */
  --outline: #64748b;
  --outline-variant: #cbd5e1;

  /* primary (navy) */
  --primary: #0f172a;
  --primary-fixed: #e2e8f0;
  --primary-fixed-dim: #cbd5e1;
  --on-primary: #ffffff;
  --on-primary-fixed: #0f172a;
  --on-primary-fixed-variant: #64748b;
  --primary-container: #1e3a5f;
  --on-primary-container: #94a3b8;

  /* secondary (blue) */
  --secondary: #2563eb;
  --on-secondary: #ffffff;
  --secondary-fixed: #bfdbfe;
  --on-secondary-fixed: #0f172a;
  --secondary-fixed-dim: #93c5fd;
  --on-secondary-fixed-variant: #475569;
  --secondary-container: #dbeafe;
  --on-secondary-container: #1d4ed8;

  /* tertiary */
  --tertiary: #1e293b;
  --on-tertiary: #f8fafc;
  --tertiary-fixed: #e2e8f0;
  --on-tertiary-fixed: #0f172a;
  --tertiary-fixed-dim: #94a3b8;
  --on-tertiary-fixed-variant: #475569;
  --tertiary-container: #0f172a;
  --on-tertiary-container: #94a3b8;

  /* inverse */
  --inverse-surface: #1e293b;
  --inverse-on-surface: #f1f5f9;
  --inverse-primary: #cbd5e1;

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

  /* accent */
  --accent-gold: #b8956a;
}

/* -------------------------------------------------------------------------
 * 1c. KOSTUR 1 — STIL 3 (city-stay)
 * Cool grey/blue urban palette.
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] {
  /* surface scale (cool light) */
  --surface-dim: #e5e7eb;
  --surface: #ffffff;
  --background: #f5f6f8;
  --surface-variant: #e5e7eb;
  --surface-bright: #ffffff;
  --surface-container: #eef0f3;
  --surface-container-low: #f3f4f6;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #e5e7eb;
  --surface-container-highest: #d1d5db;
  --surface-tint: #374151;

  /* on-surface (text on light) */
  --on-surface: #111827;
  --on-surface-variant: #4b5563;
  --on-background: #111827;

  /* outlines */
  --outline: #6b7280;
  --outline-variant: #d1d5db;

  /* primary (near-black) */
  --primary: #0a0a0a;
  --primary-fixed: #e5e7eb;
  --primary-fixed-dim: #d1d5db;
  --on-primary: #ffffff;
  --on-primary-fixed: #111827;
  --on-primary-fixed-variant: #4b5563;
  --primary-container: #1f2937;
  --on-primary-container: #9ca3af;

  /* secondary (blue) */
  --secondary: #2563eb;
  --on-secondary: #ffffff;
  --secondary-fixed: #bfdbfe;
  --on-secondary-fixed: #111827;
  --secondary-fixed-dim: #93c5fd;
  --on-secondary-fixed-variant: #374151;
  --secondary-container: #dbeafe;
  --on-secondary-container: #1d4ed8;

  /* tertiary */
  --tertiary: #111827;
  --on-tertiary: #ffffff;
  --tertiary-fixed: #e5e7eb;
  --on-tertiary-fixed: #111827;
  --tertiary-fixed-dim: #9ca3af;
  --on-tertiary-fixed-variant: #374151;
  --tertiary-container: #111827;
  --on-tertiary-container: #6b7280;

  /* inverse */
  --inverse-surface: #1f2937;
  --inverse-on-surface: #f3f4f6;
  --inverse-primary: #d1d5db;

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

  /* accent */
  --accent-bronze: #7c6a4f;
}

/* -------------------------------------------------------------------------
 * 1d. KOSTUR 1 — STIL 4 (premium-flat)
 * Warm cream/gold luxury palette.
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] {
  /* surface scale (warm cream) */
  --surface-dim: #e8e0d4;
  --surface: #fffcf7;
  --background: #f7f3ed;
  --surface-variant: #e8e0d4;
  --surface-bright: #fffcf7;
  --surface-container: #ede6db;
  --surface-container-low: #f0ebe3;
  --surface-container-lowest: #fffcf7;
  --surface-container-high: #e5ddd0;
  --surface-container-highest: #d6cfc4;
  --surface-tint: #3d3832;

  /* on-surface (text on light) */
  --on-surface: #1c1917;
  --on-surface-variant: #5c534a;
  --on-background: #1c1917;

  /* outlines */
  --outline: #8a8178;
  --outline-variant: #d6cfc4;

  /* primary (charcoal) */
  --primary: #1c1917;
  --primary-fixed: #e8e0d4;
  --primary-fixed-dim: #d6cfc4;
  --on-primary: #f7f3ed;
  --on-primary-fixed: #1c1917;
  --on-primary-fixed-variant: #6b635a;
  --primary-container: #3d3832;
  --on-primary-container: #c4bdb4;

  /* secondary (gold) */
  --secondary: #b8956a;
  --on-secondary: #1c1917;
  --secondary-fixed: #e8dcc8;
  --on-secondary-fixed: #1c1917;
  --secondary-fixed-dim: #d4c4a8;
  --on-secondary-fixed-variant: #5c534a;
  --secondary-container: #ede4d6;
  --on-secondary-container: #6b5340;

  /* tertiary */
  --tertiary: #2a2520;
  --on-tertiary: #f7f3ed;
  --tertiary-fixed: #e8e0d4;
  --on-tertiary-fixed: #1c1917;
  --tertiary-fixed-dim: #a89f94;
  --on-tertiary-fixed-variant: #5c534a;
  --tertiary-container: #2a2520;
  --on-tertiary-container: #a89f94;

  /* inverse */
  --inverse-surface: #2a2520;
  --inverse-on-surface: #f7f3ed;
  --inverse-primary: #d6cfc4;

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

  /* accent */
  --accent-gold: #b8956a;
}

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

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

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

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

/* opacity-modifier helpers */
body[class*='slotivo-kostur-a'] .bg-background\/80     { background-color: color-mix(in srgb, var(--background) 80%, transparent); }
body[class*='slotivo-kostur-a'] .bg-background\/90     { background-color: color-mix(in srgb, var(--background) 90%, transparent); }
body[class*='slotivo-kostur-a'] .bg-background\/95     { background-color: color-mix(in srgb, var(--background) 95%, transparent); }
body[class*='slotivo-kostur-a'] .bg-surface\/90       { background-color: color-mix(in srgb, var(--surface) 90%, transparent); }
body[class*='slotivo-kostur-a'] .bg-surface\/95       { background-color: color-mix(in srgb, var(--surface) 95%, transparent); }
body[class*='slotivo-kostur-a'] .bg-primary\/20        { background-color: color-mix(in srgb, var(--primary) 20%, transparent); }
body[class*='slotivo-kostur-a'] .bg-surface-container-highest\/50 { background-color: color-mix(in srgb, var(--surface-container-highest) 50%, transparent); }
body[class*='slotivo-kostur-a'] .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-a'] .text-on-surface          { color: var(--on-surface); }
body[class*='slotivo-kostur-a'] .text-on-surface-variant  { color: var(--on-surface-variant); }
body[class*='slotivo-kostur-a'] .text-on-background       { color: var(--on-background); }
body[class*='slotivo-kostur-a'] .text-primary             { color: var(--primary); }
body[class*='slotivo-kostur-a'] .text-secondary           { color: var(--secondary); }
body[class*='slotivo-kostur-a'] .text-outline             { color: var(--outline); }
body[class*='slotivo-kostur-a'] .text-outline-variant     { color: var(--outline-variant); }
body[class*='slotivo-kostur-a'] .text-background          { color: var(--background); }
body[class*='slotivo-kostur-a'] .text-on-primary          { color: var(--on-primary); }
body[class*='slotivo-kostur-a'] .text-on-primary-container { color: var(--on-primary-container); }
body[class*='slotivo-kostur-a'] .text-on-secondary-container { color: var(--on-secondary-container); }
body[class*='slotivo-kostur-a'] .text-error                 { color: var(--error); }

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

/* placeholder color */
body[class*='slotivo-kostur-a'] .placeholder\:text-outline-variant::placeholder {
  color: var(--outline-variant);
}
body[class*='slotivo-kostur-a'] .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-a'] .border-outline         { border-color: var(--outline); }
body[class*='slotivo-kostur-a'] .border-outline-variant { border-color: var(--outline-variant); }
body[class*='slotivo-kostur-a'] .border-on-surface      { border-color: var(--on-surface); }
body[class*='slotivo-kostur-a'] .border-primary         { border-color: var(--primary); }
body[class*='slotivo-kostur-a'] .border-secondary       { border-color: var(--secondary); }

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

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

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

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

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

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

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

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

/* -------------------------------------------------------------------------
 * 8. Typography — font families & sizes
 *
 * S1: Playfair Display + Inter
 * S2: IBM Plex Sans + Inter
 * S3: DM Sans + Inter
 * S4: Playfair Display + Inter
 * ------------------------------------------------------------------------- */

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

/* S2 fonts — IBM Plex Sans headlines */
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .font-display-lg,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .font-headline-lg,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .font-headline-md,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .font-headline-sm {
  font-family: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
}
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .font-body-md,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .font-body-lg,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .font-label-sm,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .font-label-md {
  font-family: 'Inter', system-ui, sans-serif;
}

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

/* S4 fonts — Playfair Display headlines (same as S1) */
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .font-display-lg,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .font-headline-lg,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .font-headline-md,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .font-headline-sm {
  font-family: 'Playfair Display', Georgia, serif;
}
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .font-body-md,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .font-body-lg,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .font-label-sm,
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .font-label-md {
  font-family: 'Inter', system-ui, sans-serif;
}

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

/* S2 typography sizes */
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .text-display-lg          { font-size: 52px;  line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .text-headline-lg         { font-size: 40px;  line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .text-headline-lg-mobile  { font-size: 30px;  line-height: 1.15; font-weight: 700; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .text-headline-md         { font-size: 28px;  line-height: 1.2; font-weight: 700; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .text-headline-sm         { font-size: 20px;  line-height: 1.3; font-weight: 700; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .text-body-lg             { font-size: 18px;  line-height: 1.55; font-weight: 400; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .text-body-md             { font-size: 15px;  line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .text-label-md            { font-size: 12px;  line-height: 1; letter-spacing: 0.08em;  font-weight: 600; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .text-label-sm            { font-size: 11px;  line-height: 1; letter-spacing: 0.05em; font-weight: 500; }

/* S3 typography sizes */
body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] .text-display-lg          { font-size: 56px;  line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] .text-headline-lg         { font-size: 42px;  line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] .text-headline-lg-mobile  { font-size: 30px;  line-height: 1.15; font-weight: 700; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] .text-headline-md         { font-size: 28px;  line-height: 1.2; font-weight: 700; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] .text-headline-sm         { font-size: 22px;  line-height: 1.3; font-weight: 700; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] .text-body-lg             { font-size: 18px;  line-height: 1.55; font-weight: 400; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] .text-body-md             { font-size: 15px;  line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] .text-label-md            { font-size: 13px;  line-height: 1; letter-spacing: 0.06em;  font-weight: 600; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] .text-label-sm            { font-size: 11px;  line-height: 1; letter-spacing: 0.04em; font-weight: 500; }

/* S4 typography sizes */
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .text-display-lg          { font-size: 56px;  line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .text-headline-lg         { font-size: 44px;  line-height: 1.15; letter-spacing: -0.01em; font-weight: 600; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .text-headline-lg-mobile  { font-size: 32px;  line-height: 1.15; font-weight: 600; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .text-headline-md         { font-size: 30px;  line-height: 1.2; font-weight: 600; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .text-headline-sm         { font-size: 22px;  line-height: 1.3; font-weight: 600; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .text-body-lg             { font-size: 18px;  line-height: 1.65; font-weight: 400; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .text-body-md             { font-size: 15px;  line-height: 1.65; font-weight: 400; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .text-label-md            { font-size: 12px;  line-height: 1; letter-spacing: 0.12em;  font-weight: 600; }
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .text-label-sm            { font-size: 11px;  line-height: 1; letter-spacing: 0.06em; font-weight: 500; }

@media (min-width: 768px) {
  body[class*='slotivo-kostur-a'][data-slotivo-stil='S1'] .md\:text-headline-lg,
  body[class*='slotivo-kostur-a']:not([data-slotivo-stil]) .md\:text-headline-lg { font-size: 48px; line-height: 1.2; font-weight: 500; }
  body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .md\:text-headline-lg  { font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
  body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] .md\:text-headline-lg  { font-size: 42px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
  body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .md\:text-headline-lg  { font-size: 44px; line-height: 1.15; letter-spacing: -0.01em; font-weight: 600; }
}

/* -------------------------------------------------------------------------
 * 9. Material Symbols (used in HTML for icons)
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-a'] .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 default (light theme) */
body[class*='slotivo-kostur-a'] ::-webkit-scrollbar         { width: 6px; }
body[class*='slotivo-kostur-a'] ::-webkit-scrollbar-track   { background: transparent; }
body[class*='slotivo-kostur-a'] ::-webkit-scrollbar-thumb   { background: var(--surface-dim); border-radius: 10px; }
body[class*='slotivo-kostur-a'] ::-webkit-scrollbar-thumb:hover { background: var(--outline); }

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

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

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

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

/* -------------------------------------------------------------------------
 * 10. Extra utilities used in K1 HTML markup
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-a'] .shadow-level-1 {
  box-shadow: var(--shadow-level-1, 0 20px 40px -10px rgba(26, 26, 26, 0.04));
}

body[class*='slotivo-kostur-a'] .hover\:shadow-level-1-hover:hover {
  box-shadow: var(--shadow-level-1-hover, 0 30px 50px -10px rgba(26, 26, 26, 0.06));
}

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

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

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

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

/* S2 business-booking-card accent border */
body[class*='slotivo-kostur-a'][data-slotivo-stil='S2'] .business-booking-card {
  border-top: 3px solid #1e3a5f;
}

/* S3 city-booking-card accent border */
body[class*='slotivo-kostur-a'][data-slotivo-stil='S3'] .city-booking-card {
  border-top: 3px solid #2563eb;
}

/* S4 premium-flat-booking-card accent border */
body[class*='slotivo-kostur-a'][data-slotivo-stil='S4'] .premium-flat-booking-card {
  border-top: 2px solid #b8956a;
}