/*
 * Slotivo PR4e — BARBERSHOP KOSTUR 3 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-c']` so they cannot leak into the
 *      rest of the app.
 *
 * Per-STIL theming: only the COLOR section changes between stilovi.
 * Spacing + fonts + utility shape stay identical.
 */

/* -------------------------------------------------------------------------
 * 1. KOSTUR 3 — STIL 1 (urban-street) defaults
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'],
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) {
  --surface-dim: #131313;
  --surface: #131313;
  --background: #131313;
  --surface-variant: #353534;
  --surface-bright: #3a3939;
  --surface-container: #201f1f;
  --surface-container-low: #1c1b1b;
  --surface-container-lowest: #0e0e0e;
  --surface-container-high: #2a2a2a;
  --surface-container-highest: #353534;
  --surface-glass: rgba(19, 19, 19, 0.95);
  --surface-tint: #ffb59a;
  --on-surface: #e5e2e1;
  --on-surface-variant: #e4beb1;
  --on-background: #e5e2e1;
  --outline: #ab897d;
  --outline-variant: #5b4137;
  --primary: #ffb59a;
  --primary-fixed: #ffdbce;
  --primary-fixed-dim: #ffb59a;
  --on-primary: #5a1b00;
  --on-primary-fixed: #370e00;
  --on-primary-fixed-variant: #802a00;
  --primary-container: #ff5c00;
  --on-primary-container: #521800;
  --secondary: #d3fbff;
  --on-secondary: #00363a;
  --secondary-fixed: #7df4ff;
  --on-secondary-fixed: #002022;
  --on-secondary-fixed-variant: #004f54;
  --secondary-fixed-dim: #00dbe9;
  --secondary-container: #00eefc;
  --on-secondary-container: #00686f;
  --tertiary: #c6c6c7;
  --on-tertiary: #2f3131;
  --tertiary-fixed: #e2e2e2;
  --on-tertiary-fixed: #1a1c1c;
  --on-tertiary-fixed-variant: #454747;
  --tertiary-fixed-dim: #c6c6c7;
  --tertiary-container: #929393;
  --on-tertiary-container: #2a2c2c;
  --inverse-surface: #e5e2e1;
  --inverse-on-surface: #313030;
  --inverse-primary: #a73a00;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --glow-accent: rgba(255, 92, 0, 0.4);
  --glow-accent-hover: rgba(255, 92, 0, 0.6);
  --glow-accent-shadow: 0 0 15px 2px rgba(255, 92, 0, 0.4);
  --glow-accent-hover-shadow: 0 0 25px 5px rgba(255, 92, 0, 0.6);
  --border-strong: #e5e2e1;
  --border-strong-width: 2px;
  --border-strong-color: #e5e2e1;
}

/* -------------------------------------------------------------------------
 * 1b. KOSTUR 3 — STIL 2 (tattoo-barber)
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] {
  --surface-dim: #131313;
  --surface: #131313;
  --background: #131313;
  --surface-variant: #353534;
  --surface-bright: #3a3939;
  --surface-container: #201f1f;
  --surface-container-low: #1c1b1b;
  --surface-container-lowest: #0e0e0e;
  --surface-container-high: #2a2a2a;
  --surface-container-highest: #353534;
  --surface-glass: rgba(19, 19, 19, 0.95);
  --surface-tint: #ffb5a1;
  --on-surface: #e5e2e1;
  --on-surface-variant: #e4beb4;
  --on-background: #e5e2e1;
  --outline: #ab8980;
  --outline-variant: #5b4039;
  --primary: #ffb5a1;
  --primary-fixed: #ffdbd1;
  --primary-fixed-dim: #ffb5a1;
  --on-primary: #611300;
  --on-primary-fixed: #3c0800;
  --on-primary-fixed-variant: #881f00;
  --primary-container: #cc3300;
  --on-primary-container: #ffece7;
  --secondary: #d7c3b0;
  --on-secondary: #3a2e21;
  --secondary-fixed: #f4dfcb;
  --on-secondary-fixed: #241a0e;
  --on-secondary-fixed-variant: #524436;
  --secondary-fixed-dim: #d7c3b0;
  --secondary-container: #544738;
  --on-secondary-container: #c8b5a3;
  --tertiary: #c8c6c5;
  --on-tertiary: #313030;
  --tertiary-fixed: #e5e2e1;
  --on-tertiary-fixed: #1c1b1b;
  --on-tertiary-fixed-variant: #474746;
  --tertiary-fixed-dim: #c8c6c5;
  --tertiary-container: #6d6c6c;
  --on-tertiary-container: #f2efee;
  --inverse-surface: #e5e2e1;
  --inverse-on-surface: #313030;
  --inverse-primary: #b22b00;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --glow-accent: rgba(204, 51, 0, 0.4);
  --glow-accent-hover: rgba(204, 51, 0, 0.6);
  --glow-accent-shadow: 0 0 15px 2px rgba(204, 51, 0, 0.4);
  --glow-accent-hover-shadow: 0 0 25px 5px rgba(204, 51, 0, 0.6);
  --border-strong: #5b4039;
  --border-strong-width: 2px;
  --border-strong-color: #5b4039;
  --container-max: 1280px;
}

/* -------------------------------------------------------------------------
 * 1c. KOSTUR 3 — STIL 3 (neon-underground)
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] {
  --surface-dim: #131314;
  --surface: #131314;
  --background: #131314;
  --surface-variant: #353436;
  --surface-bright: #3a393a;
  --surface-container: #201f20;
  --surface-container-low: #1c1b1c;
  --surface-container-lowest: #0e0e0f;
  --surface-container-high: #2a2a2b;
  --surface-container-highest: #353436;
  --surface-glass: rgba(19, 19, 20, 0.95);
  --surface-tint: #00dbe9;
  --on-surface: #e5e2e3;
  --on-surface-variant: #b9cacb;
  --on-background: #e5e2e3;
  --outline: #849495;
  --outline-variant: #3b494b;
  --primary: #dbfcff;
  --primary-fixed: #7df4ff;
  --primary-fixed-dim: #00dbe9;
  --on-primary: #00363a;
  --on-primary-fixed: #002022;
  --on-primary-fixed-variant: #004f54;
  --primary-container: #00f0ff;
  --on-primary-container: #006970;
  --secondary: #fface8;
  --on-secondary: #5e0053;
  --secondary-fixed: #ffd7f0;
  --on-secondary-fixed: #3a0033;
  --on-secondary-fixed-variant: #840076;
  --secondary-fixed-dim: #fface8;
  --secondary-container: #ff24e4;
  --on-secondary-container: #520049;
  --tertiary: #e9ffa8;
  --on-tertiary: #283500;
  --tertiary-fixed: #c3f400;
  --on-tertiary-fixed: #161e00;
  --on-tertiary-fixed-variant: #3c4d00;
  --tertiary-fixed-dim: #abd600;
  --tertiary-container: #bbea00;
  --on-tertiary-container: #506600;
  --inverse-surface: #e5e2e3;
  --inverse-on-surface: #313031;
  --inverse-primary: #006970;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --glow-accent: rgba(0, 240, 255, 0.4);
  --glow-accent-hover: rgba(0, 240, 255, 0.6);
  --glow-accent-shadow: 0 0 15px 2px rgba(0, 240, 255, 0.4);
  --glow-accent-hover-shadow: 0 0 25px 5px rgba(0, 240, 255, 0.6);
  --border-strong: #3b494b;
  --border-strong-width: 1px;
  --border-strong-color: #3b494b;
  --container-max: 1440px;
  --margin-mobile: 20px;
}

/* -------------------------------------------------------------------------
 * 1d. KOSTUR 3 — STIL 4 (fade-culture)
 * Cyan-on-black high-contrast street palette.
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] {
  --surface-dim: #111111;
  --surface: #111111;
  --background: #0a0a0a;
  --surface-variant: #222222;
  --surface-bright: #333333;
  --surface-container: #1a1a1a;
  --surface-container-low: #151515;
  --surface-container-lowest: #050505;
  --surface-container-high: #222222;
  --surface-container-highest: #2a2a2a;
  --surface-glass: rgba(10, 10, 10, 0.95);
  --surface-tint: #00f2ff;
  --on-surface: #f0f0f0;
  --on-surface-variant: #a0a0a0;
  --on-background: #f0f0f0;
  --outline: #333333;
  --outline-variant: #222222;
  --primary: #00f2ff;
  --primary-fixed: #ccfdff;
  --primary-fixed-dim: #00c8d4;
  --on-primary: #000000;
  --on-primary-fixed: #001a1c;
  --on-primary-fixed-variant: #003336;
  --primary-container: #00f2ff;
  --on-primary-container: #000000;
  --secondary: #00f2ff;
  --on-secondary: #000000;
  --secondary-fixed: #00f2ff;
  --on-secondary-fixed: #002022;
  --on-secondary-fixed-variant: #004f54;
  --secondary-fixed-dim: #00c8d4;
  --secondary-container: #00c8d4;
  --on-secondary-container: #000000;
  --tertiary: #c6c6c7;
  --on-tertiary: #2f3131;
  --tertiary-fixed: #e2e2e2;
  --on-tertiary-fixed: #1a1c1c;
  --on-tertiary-fixed-variant: #454747;
  --tertiary-fixed-dim: #c6c6c7;
  --tertiary-container: #929393;
  --on-tertiary-container: #2a2c2c;
  --inverse-surface: #e5e2e1;
  --inverse-on-surface: #313030;
  --inverse-primary: #00888f;
  --error: #ff5c5c;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --glow-accent: rgba(0, 242, 255, 0.4);
  --glow-accent-hover: rgba(0, 242, 255, 0.6);
  --glow-accent-shadow: 0 0 15px 1px rgba(0, 242, 255, 0.4);
  --glow-accent-hover-shadow: 0 0 25px 2px rgba(0, 242, 255, 0.6);
  --border-strong: #333333;
  --border-strong-width: 1px;
  --border-strong-color: #333333;
}

/* -------------------------------------------------------------------------
 * 2. Spacing scale (shared by all stilovi in K3)
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-c'] {
  --margin-mobile: 16px;
  --margin: 32px;
  --margin-desktop: 64px;
  --section-padding: 48px;
  --container-max: 1536px;
  --gutter: 24px;
  --unit: 4px;
  --xs: 4px;
  --sm: 12px;
  --md: 24px;
  --lg: 48px;
  --xl: 80px;
  --base: 8px;
}

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

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

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

body[class*='slotivo-kostur-c'] .hover\:bg-primary:hover            { background-color: var(--primary); }
body[class*='slotivo-kostur-c'] .hover\:bg-primary\/10:hover        { background-color: color-mix(in srgb, var(--primary) 10%, transparent); }
body[class*='slotivo-kostur-c'] .hover\:bg-primary\/90:hover        { background-color: color-mix(in srgb, var(--primary) 90%, transparent); }
body[class*='slotivo-kostur-c'] .hover\:bg-tertiary:hover           { background-color: var(--tertiary); }
body[class*='slotivo-kostur-c'] .hover\:bg-tertiary-fixed-dim:hover { background-color: var(--tertiary-fixed-dim); }
body[class*='slotivo-kostur-c'] .hover\:bg-surface:hover            { background-color: var(--surface); }
body[class*='slotivo-kostur-c'] .hover\:bg-surface-container:hover  { background-color: var(--surface-container); }
body[class*='slotivo-kostur-c'] .hover\:bg-surface-container-high:hover    { background-color: var(--surface-container-high); }
body[class*='slotivo-kostur-c'] .hover\:bg-surface-container-highest:hover { background-color: var(--surface-container-highest); }
body[class*='slotivo-kostur-c'] .hover\:bg-outline-variant:hover    { background-color: var(--outline-variant); }
body[class*='slotivo-kostur-c'] .hover\:bg-secondary\/90:hover      { background-color: color-mix(in srgb, var(--secondary) 90%, transparent); }

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

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

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

body[class*='slotivo-kostur-c'] .placeholder\:text-outline-variant::placeholder {
  color: var(--outline-variant);
}

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

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

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

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

body[class*='slotivo-kostur-c'] .focus\:ring-tertiary:focus {
  --tw-ring-color: var(--tertiary);
  box-shadow: 0 0 0 1px var(--tertiary);
}

/* -------------------------------------------------------------------------
 * 6. Utility classes — selection / opacity
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-c'] .selection\:bg-tertiary ::selection,
body[class*='slotivo-kostur-c'].selection\:bg-tertiary ::selection {
  background-color: var(--tertiary);
}

body[class*='slotivo-kostur-c'] .selection\:text-on-tertiary ::selection,
body[class*='slotivo-kostur-c'].selection\:text-on-tertiary ::selection {
  color: var(--on-tertiary);
}

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

/* -------------------------------------------------------------------------
 * 7. Spacing utilities
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-c'] .px-gutter           { padding-left: var(--gutter); padding-right: var(--gutter); }
body[class*='slotivo-kostur-c'] .px-margin-mobile    { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
body[class*='slotivo-kostur-c'] .px-margin           { padding-left: var(--margin); padding-right: var(--margin); }
body[class*='slotivo-kostur-c'] .px-margin-desktop   { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
body[class*='slotivo-kostur-c'] .py-margin-desktop   { padding-top: var(--margin-desktop); padding-bottom: var(--margin-desktop); }
body[class*='slotivo-kostur-c'] .py-lg               { padding-top: var(--lg); padding-bottom: var(--lg); }
body[class*='slotivo-kostur-c'] .py-xl               { padding-top: var(--xl); padding-bottom: var(--xl); }
body[class*='slotivo-kostur-c'] .py-sm               { padding-top: var(--sm); padding-bottom: var(--sm); }
body[class*='slotivo-kostur-c'] .py-xs               { padding-top: var(--xs); padding-bottom: var(--xs); }
body[class*='slotivo-kostur-c'] .py-base             { padding-top: var(--base); padding-bottom: var(--base); }
body[class*='slotivo-kostur-c'] .px-sm               { padding-left: var(--sm); padding-right: var(--sm); }
body[class*='slotivo-kostur-c'] .px-md               { padding-left: var(--md); padding-right: var(--md); }
body[class*='slotivo-kostur-c'] .px-lg               { padding-left: var(--lg); padding-right: var(--lg); }
body[class*='slotivo-kostur-c'] .p-md                { padding: var(--md); }
body[class*='slotivo-kostur-c'] .p-gutter            { padding: var(--gutter); }
body[class*='slotivo-kostur-c'] .p-margin            { padding: var(--margin); }
body[class*='slotivo-kostur-c'] .p-margin-desktop    { padding: var(--margin-desktop); }
body[class*='slotivo-kostur-c'] .gap-xs              { gap: var(--xs); }
body[class*='slotivo-kostur-c'] .gap-sm              { gap: var(--sm); }
body[class*='slotivo-kostur-c'] .gap-md              { gap: var(--md); }
body[class*='slotivo-kostur-c'] .gap-lg              { gap: var(--lg); }
body[class*='slotivo-kostur-c'] .gap-gutter          { gap: var(--gutter); }
body[class*='slotivo-kostur-c'] .mt-md               { margin-top: var(--md); }
body[class*='slotivo-kostur-c'] .mt-gutter           { margin-top: var(--gutter); }
body[class*='slotivo-kostur-c'] .mt-lg               { margin-top: var(--lg); }
body[class*='slotivo-kostur-c'] .mt-xl               { margin-top: var(--xl); }
body[class*='slotivo-kostur-c'] .mb-gutter           { margin-bottom: var(--gutter); }
body[class*='slotivo-kostur-c'] .mb-lg               { margin-bottom: var(--lg); }
body[class*='slotivo-kostur-c'] .mb-md               { margin-bottom: var(--md); }
body[class*='slotivo-kostur-c'] .mb-sm               { margin-bottom: var(--sm); }
body[class*='slotivo-kostur-c'] .space-x-md > :not([hidden]) ~ :not([hidden]) { margin-left: var(--md); }
body[class*='slotivo-kostur-c'] .space-x-gutter > :not([hidden]) ~ :not([hidden]) { margin-left: var(--gutter); }
body[class*='slotivo-kostur-c'] .space-y-gutter > :not([hidden]) ~ :not([hidden]) { margin-top: var(--gutter); }
body[class*='slotivo-kostur-c'] .max-w-container-max { max-width: var(--container-max); }

@media (min-width: 768px) {
  body[class*='slotivo-kostur-c'] .md\:px-margin { padding-left: var(--margin); padding-right: var(--margin); }
  body[class*='slotivo-kostur-c'] .md\:px-margin-desktop { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
  body[class*='slotivo-kostur-c'] .md\:p-margin { padding: var(--margin); }
  body[class*='slotivo-kostur-c'] .md\:py-xl { padding-top: var(--xl); padding-bottom: var(--xl); }
  body[class*='slotivo-kostur-c'] .md\:py-lg { padding-top: var(--lg); padding-bottom: var(--lg); }
  body[class*='slotivo-kostur-c'] .md\:mt-xl { margin-top: var(--xl); }
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .md\:text-display-lg,
  body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .md\:text-display-lg {
    font-size: 72px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 800;
  }
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .md\:text-headline-lg,
  body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .md\:text-headline-lg {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 800;
  }
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .md\:text-headline-xl,
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .md\:text-headline-xl {
    font-size: 64px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 800;
  }
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .md\:text-headline-lg,
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .md\:text-headline-lg {
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 700;
  }
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .md\:text-display-lg {
    font-size: 72px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 700;
  }
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .md\:text-headline-lg {
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
  }
  body[class*='slotivo-kostur-c'] .md\:text-headline-md {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
  }
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .md\:text-headline-md {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
  }
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .md\:text-headline-md {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
  }
  body[class*='slotivo-kostur-c'] .md\:text-\[20px\] {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  body[class*='slotivo-kostur-c'] .lg\:px-margin-desktop { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
  body[class*='slotivo-kostur-c'] .lg\:mt-0 { margin-top: 0 !important; }
}

/* -------------------------------------------------------------------------
 * 8. Typography — font families & sizes (S1 / urban-street default)
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'],
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) {
  --font-display: 'Syne', system-ui, sans-serif;
  --font-headline: 'Syne', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-label: 'JetBrains Mono', ui-monospace, monospace;
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .font-display-lg,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .font-headline-lg,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .font-headline-lg-mobile,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .font-headline-md,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .font-display-lg,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .font-headline-lg,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .font-headline-lg-mobile,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .font-headline-md {
  font-family: var(--font-headline);
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .font-body-md,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .font-body-lg,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .font-body-md,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .font-body-lg {
  font-family: var(--font-body);
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .font-label-caps,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .font-label-caps {
  font-family: var(--font-label);
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .text-display-lg,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .text-display-lg { font-size: 72px; line-height: 1; letter-spacing: -0.04em; font-weight: 800; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .text-headline-lg,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .text-headline-lg { font-size: 48px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
@media (max-width: 767px) {
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .text-headline-lg-mobile,
  body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .text-headline-lg-mobile { font-size: 32px; line-height: 1.1; font-weight: 800; }
}
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .text-headline-md,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .text-headline-md { font-size: 32px; line-height: 1.2; font-weight: 700; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .text-body-lg,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .text-body-lg { font-size: 18px; line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .text-body-md,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .text-body-md { font-size: 16px; line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'] .text-label-caps,
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) .text-label-caps { font-size: 12px; line-height: 1; letter-spacing: 0.1em; font-weight: 600; }

/* S2 — tattoo-barber (Bricolage Grotesque + Hanken Grotesk + JetBrains Mono) */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] {
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-headline: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-label: 'JetBrains Mono', ui-monospace, monospace;
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .font-headline-xl,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .font-headline-lg,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .font-headline-lg-mobile,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .font-headline-md {
  font-family: var(--font-headline);
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .font-body-md,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .font-body-lg {
  font-family: var(--font-body);
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .font-label-sm {
  font-family: var(--font-label);
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .text-headline-xl { font-size: 64px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .text-headline-lg { font-size: 40px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
@media (max-width: 767px) {
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .text-headline-lg-mobile { font-size: 32px; line-height: 1.2; font-weight: 700; }
}
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .text-body-lg { font-size: 18px; line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .text-body-md { font-size: 16px; line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .text-label-sm { font-size: 12px; line-height: 1; letter-spacing: 0.1em; font-weight: 500; }

/* S3 — neon-underground (Syne + Hanken Grotesk + JetBrains Mono) */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] {
  --font-display: 'Syne', system-ui, sans-serif;
  --font-headline: 'Syne', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-label: 'JetBrains Mono', ui-monospace, monospace;
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .font-headline-xl,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .font-headline-lg,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .font-headline-lg-mobile,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .font-headline-md {
  font-family: var(--font-headline);
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .font-body-md,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .font-body-lg {
  font-family: var(--font-body);
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .font-label-sm,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .font-label-md {
  font-family: var(--font-label);
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .text-headline-xl { font-size: 64px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .text-headline-lg { font-size: 40px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
@media (max-width: 767px) {
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .text-headline-lg-mobile { font-size: 32px; line-height: 1.2; font-weight: 700; }
}
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .text-headline-md { font-size: 24px; line-height: 1.3; font-weight: 600; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .text-body-lg { font-size: 18px; line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .text-body-md { font-size: 16px; line-height: 1.5; font-weight: 400; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .text-label-md { font-size: 14px; line-height: 1.2; letter-spacing: 0.05em; font-weight: 500; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .text-label-sm { font-size: 12px; line-height: 1.2; font-weight: 500; }

/* S4 — fade-culture (Space Grotesk throughout) */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-headline: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-label: 'Space Grotesk', system-ui, sans-serif;
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .font-display-lg,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .font-headline-lg,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .font-headline-lg-mobile,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .font-headline-md,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .font-body-md,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .font-body-lg,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .font-label-caps {
  font-family: var(--font-body);
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .text-display-lg { font-size: 72px; line-height: 1; letter-spacing: -0.04em; font-weight: 700; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .text-headline-lg { font-size: 48px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
@media (max-width: 767px) {
  body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .text-headline-lg-mobile { font-size: 32px; line-height: 1.1; font-weight: 700; }
}
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .text-headline-md { font-size: 32px; line-height: 1.2; font-weight: 600; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .text-body-lg { font-size: 18px; line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .text-body-md { font-size: 16px; line-height: 1.6; font-weight: 400; }
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .text-label-caps { font-size: 12px; line-height: 1; letter-spacing: 0.1em; font-weight: 600; }

/* -------------------------------------------------------------------------
 * 9. Material Symbols (used in HTML for icons)
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-c'] .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;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------
 * 10. Extra utilities used in K3 HTML markup
 * ------------------------------------------------------------------------- */
body[class*='slotivo-kostur-c'] .border-strong {
  border-style: solid;
  border-width: var(--border-strong-width, 2px);
  border-color: var(--border-strong-color, var(--border-strong, var(--on-surface)));
}

body[class*='slotivo-kostur-c'] .glow-accent {
  box-shadow: var(--glow-accent-shadow, 0 0 15px 2px var(--glow-accent, rgba(255, 92, 0, 0.4)));
}

body[class*='slotivo-kostur-c'] .glow-accent-hover:hover {
  box-shadow: var(--glow-accent-hover-shadow, 0 0 25px 5px var(--glow-accent-hover, rgba(255, 92, 0, 0.6)));
}

body[class*='slotivo-kostur-c'] .marquee-container { overflow: hidden; }
body[class*='slotivo-kostur-c'] .marquee-track {
  display: flex;
  width: max-content;
  animation: slotivo-k3-marquee 70s linear infinite;
}
body[class*='slotivo-kostur-c'] .marquee-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 80px;
}
body[class*='slotivo-kostur-c'] .marquee-group span {
  flex-shrink: 0;
  white-space: nowrap;
}

@keyframes slotivo-k3-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

body[class*='slotivo-kostur-c'] select.appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
}

body[class*='slotivo-kostur-c'] select.appearance-none::-ms-expand {
  display: none;
}

body[class*='slotivo-kostur-c'] .selection\:bg-primary-container ::selection,
body[class*='slotivo-kostur-c'].selection\:bg-primary-container ::selection {
  background-color: var(--primary-container);
}

body[class*='slotivo-kostur-c'] .selection\:text-on-primary-container ::selection,
body[class*='slotivo-kostur-c'].selection\:text-on-primary-container ::selection {
  color: var(--on-primary-container);
}

body[class*='slotivo-kostur-c'] .focus\:border-primary-container:focus {
  border-color: var(--primary-container);
}

body[class*='slotivo-kostur-c'] .focus\:ring-primary-container:focus {
  --tw-ring-color: var(--primary-container);
}

body[class*='slotivo-kostur-c'] ::-webkit-scrollbar         { width: 8px; }
body[class*='slotivo-kostur-c'] ::-webkit-scrollbar-track   { background: var(--surface-dim); }
body[class*='slotivo-kostur-c'] ::-webkit-scrollbar-thumb   { background: var(--outline-variant); border-radius: 0; }
body[class*='slotivo-kostur-c'] ::-webkit-scrollbar-thumb:hover { background: var(--primary-container); }

/* -------------------------------------------------------------------------
 * 11. K3 stil-specific custom property extensions
 * ------------------------------------------------------------------------- */

/* S1 / default tattoo-border: identical to border-strong */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S1'],
body[class*='slotivo-kostur-c']:not([data-slotivo-stil]) {
  --tattoo-border-width: 2px;
  --tattoo-border-color: var(--border-strong);
  --tattoo-border-shadow: none;
  --tattoo-focus-shadow: none;
  --ink-bg: none;
}

/* S2 tattoo-barber: warm dark-red offset shadow border */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] {
  --tattoo-border-width: 2px;
  --tattoo-border-color: var(--outline-variant);
  --tattoo-border-shadow: 4px 4px 0px 0px var(--primary-container);
  --tattoo-border-hover-transform: translate(-2px, -2px);
  --tattoo-border-hover-shadow: 6px 6px 0px 0px var(--primary-container);
  --tattoo-focus-shadow: 6px 6px 0px 0px var(--primary-container);
  --ink-bg: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
}

/* S3 neon-underground: cyan glow border with inset + outset glow */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] {
  --tattoo-border-width: 1px;
  --tattoo-border-color: var(--primary-container);
  --tattoo-border-shadow: 0 0 8px 0px rgba(0, 240, 255, 0.4), inset 0 0 8px 0px rgba(0, 240, 255, 0.2);
  --tattoo-border-hover-shadow: 0 0 15px 2px rgba(0, 240, 255, 0.7), inset 0 0 10px 1px rgba(0, 240, 255, 0.4);
  --tattoo-border-hover-text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
  --tattoo-focus-shadow: 0 0 15px 2px rgba(0, 240, 255, 0.7), inset 0 0 10px 1px rgba(0, 240, 255, 0.4);
  --ink-bg: none;
}

/* S4 fade-culture: no tattoo border, grid enabled */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] {
  --tattoo-border-width: 1px;
  --tattoo-border-color: var(--outline);
  --tattoo-border-shadow: none;
  --tattoo-focus-shadow: none;
  --ink-bg: none;
}

/* -------------------------------------------------------------------------
 * 12. K3 tattoo-border, ink-texture, bg-grid utilities
 * ------------------------------------------------------------------------- */

body[class*='slotivo-kostur-c'] .tattoo-border {
  border-width: var(--tattoo-border-width, 2px);
  border-style: solid;
  border-color: var(--tattoo-border-color, var(--border-strong));
  box-shadow: var(--tattoo-border-shadow, none);
  transition: all 0.2s ease;
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .tattoo-border:hover,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S2'] .tattoo-border-focus:focus-within {
  transform: var(--tattoo-border-hover-transform, translate(-2px, -2px));
  box-shadow: var(--tattoo-border-hover-shadow, var(--tattoo-focus-shadow, none));
}

body[class*='slotivo-kostur-c'][data-slotivo-stil='S3'] .tattoo-border:hover {
  box-shadow: var(--tattoo-border-hover-shadow, none);
  text-shadow: var(--tattoo-border-hover-text-shadow, none);
}

body[class*='slotivo-kostur-c'] .tattoo-border-focus:focus-within {
  box-shadow: var(--tattoo-focus-shadow, none);
  outline: none;
}

body[class*='slotivo-kostur-c'] .ink-texture {
  background-image: var(--ink-bg, none);
}

/* bg-grid: S4 dot-grid background (fade-culture source HTML) */
body[class*='slotivo-kostur-c'] .bg-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Surface opacity helpers */
body[class*='slotivo-kostur-c'] .bg-surface\/50  { background-color: color-mix(in srgb, var(--surface) 50%, transparent); }
body[class*='slotivo-kostur-c'] .bg-surface\/80  { background-color: color-mix(in srgb, var(--surface) 80%, transparent); }
body[class*='slotivo-kostur-c'] .bg-primary-container\/20 { background-color: color-mix(in srgb, var(--primary-container) 20%, transparent); }

/* Hero gradient — token colors (Tailwind from-background uses app hsl vars) */
body[class*='slotivo-kostur-c'] .k3-hero-gradient {
  background-image: linear-gradient(
    to right,
    var(--background),
    color-mix(in srgb, var(--background) 80%, transparent),
    transparent
  );
}
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .k3-hero-gradient {
  background-image: linear-gradient(
    to right,
    var(--background),
    color-mix(in srgb, var(--background) 90%, transparent),
    transparent
  );
}

/* hover\:bg-primary-container mapped here for completeness */
body[class*='slotivo-kostur-c'] .hover\:bg-primary-container:hover { background-color: var(--primary-container); }
body[class*='slotivo-kostur-c'] .hover\:text-on-primary-container:hover { color: var(--on-primary-container); }
body[class*='slotivo-kostur-c'] .hover\:border-primary-container:hover { border-color: var(--primary-container); }
body[class*='slotivo-kostur-c'] .border-primary-container { border-color: var(--primary-container); }

/* S4 fade-culture: sharp corners (borderRadius DEFAULT 0rem in reference HTML) */
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .rounded-lg,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .rounded-xl,
body[class*='slotivo-kostur-c'][data-slotivo-stil='S4'] .rounded-full:not(.w-12):not(.w-10) {
  border-radius: 0 !important;
}

/* -------------------------------------------------------------------------
 * Template shield — platform globals must not override barbershop K3 tokens
 * ------------------------------------------------------------------------- */
html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] {
  color: var(--on-background) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] .text-on-surface {
  color: var(--on-surface) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] .text-on-surface-variant {
  color: var(--on-surface-variant) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] .text-on-background {
  color: var(--on-background) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] .text-primary {
  color: var(--primary) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] .text-primary-container {
  color: var(--primary-container) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] .text-on-primary-container {
  color: var(--on-primary-container) !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] .text-error {
  color: var(--error) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] label {
  font-weight: inherit;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] input:not([type='checkbox']):not([type='radio']),
html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] select,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] textarea {
  color: var(--on-surface) !important;
  caret-color: var(--on-surface) !important;
  -webkit-text-fill-color: var(--on-surface) !important;
  font-weight: inherit !important;
  font-family: inherit !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] input::placeholder,
html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] textarea::placeholder {
  color: var(--outline-variant) !important;
  opacity: 1 !important;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] main button.border-strong {
  min-height: unset !important;
  font-weight: inherit;
}

html[data-slotivo-template-ready] body[class*='slotivo-kostur-c'] #cookie-banner button {
  min-height: unset !important;
}