/* Barbershop Manolli — color tokens. Sampled from the shop interior + logo. */
:root{
/* Mint — primary. 300 is the painted wall ("Manolli Mint"). */
--color-mint-50:#F0F9F8;--color-mint-100:#DDF2EF;--color-mint-200:#C3E8E4;--color-mint-300:#A4DCD8;--color-mint-400:#80C9C1;--color-mint-500:#5BB3A8;--color-mint-600:#43978D;--color-mint-700:#2F7A72;--color-mint-800:#235C56;--color-mint-900:#173F3B;--color-mint-950:#0D2624;
/* Gold — logo filigree, gilded mantel, brass bulbs */
--color-gold-100:#F3EAD6;--color-gold-300:#D9BF85;--color-gold-500:#B8934F;--color-gold-700:#8A6A30;--color-gold-900:#4E3C1B;
/* Leaf — the botanical triangle wall */
--color-leaf-300:#8FA88F;--color-leaf-500:#4E6B52;--color-leaf-700:#2F4A35;--color-leaf-900:#1A2A1E;
/* Ink + neutrals — black chairs, frames, chalk walls, porcelain tile */
--color-ink:#111413;--color-ink-800:#1C201F;--color-ink-700:#272C2A;
--color-stone-600:#5E625F;--color-stone-400:#9A9D99;--color-stone-200:#D9DAD5;--color-stone-100:#ECEAE3;
--color-chalk:#F7F7F4;--color-white:#FFFFFF;
/* Citron — the yellow hearth. Rare pop accent only. */
--color-citron:#E2D25E;
/* Status */
--color-success:#2E7D5B;--color-success-bg:#E3F1EA;--color-error:#B3412E;--color-error-bg:#F7E4E0;--color-warning:#9A6A12;--color-warning-bg:#F6EDD8;

/* Semantic roles */
--bg-page:var(--color-chalk);--bg-inverse:var(--color-ink);--bg-mint:var(--color-mint-300);--bg-mint-soft:var(--color-mint-100);--bg-leaf:var(--color-leaf-700);
--surface-card:var(--color-white);--surface-raised:var(--color-white);--surface-sunken:var(--color-stone-100);--surface-inverse:var(--color-ink-800);
--text-primary:var(--color-ink);--text-secondary:var(--color-stone-600);--text-muted:var(--color-stone-400);--text-inverse:var(--color-chalk);--text-on-mint:var(--color-ink);--text-link:var(--color-mint-800);--text-accent:var(--color-gold-700);--text-accent-inverse:var(--color-gold-300);
--border-subtle:var(--color-stone-200);--border-strong:var(--color-ink);--border-inverse:rgba(247,247,244,.16);--border-gold:var(--color-gold-500);
--accent:var(--color-mint-300);--accent-strong:var(--color-mint-700);--accent-gold:var(--color-gold-500);
--focus-ring:var(--color-mint-500);
--light-line:#FFFDF5;--light-glow:rgba(255,248,225,.55);
}

:root{
--font-display:'DM Serif Display',Georgia,'Times New Roman',serif;
--font-sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-label:'Barlow Condensed','Barlow',system-ui,sans-serif;
--weight-regular:400; /* @kind font */
--weight-medium:500; /* @kind font */
--weight-semibold:600; /* @kind font */
--weight-bold:700; /* @kind font */
--fs-h1:72px;--lh-h1:1.02; /* @kind font */
--ls-h1:-0.02em; /* @kind font */
--fs-h2:52px;--lh-h2:1.06; /* @kind font */
--ls-h2:-0.015em; /* @kind font */
--fs-h3:38px;--lh-h3:1.1; /* @kind font */
--ls-h3:-0.01em; /* @kind font */
--fs-h4:28px;--lh-h4:1.15; /* @kind font */
--ls-h4:0; /* @kind font */
--fs-h5:20px;--lh-h5:1.25; /* @kind font */
--ls-h5:0.08em; /* @kind font */
--fs-h6:15px;--lh-h6:1.3; /* @kind font */
--ls-h6:0.16em; /* @kind font */
--fs-body-lg:19px;--lh-body-lg:1.6; /* @kind font */
--fs-body:16px;--lh-body:1.6; /* @kind font */
--fs-body-sm:14px;--lh-body-sm:1.5; /* @kind font */
--fs-caption:12px;--lh-caption:1.4; /* @kind font */
--ls-caption:0.04em; /* @kind font */
--fs-button:15px;--lh-button:1; /* @kind font */
--ls-button:0.14em; /* @kind font */
--fs-price:26px;
--fs-h1-m:44px;--fs-h2-m:36px;--fs-h3-m:28px;--fs-h4-m:22px;
}

:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--container-max:1240px;
--grid-cols-desktop:12; /* @kind other */
--grid-gutter-desktop:24px;--grid-margin-desktop:64px;
--grid-cols-tablet:8; /* @kind other */
--grid-gutter-tablet:20px;--grid-margin-tablet:40px;
--grid-cols-mobile:4; /* @kind other */
--grid-gutter-mobile:16px;--grid-margin-mobile:20px;
--section-y:var(--space-9);--section-y-m:var(--space-8);
--nav-height:76px;
}

:root{
--radius-0:0;--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-pill:999px;--radius-round:50%;
--border-hair:1px;--border-line:1.5px;--border-heavy:2px;
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(17,20,19,.06),0 1px 1px rgba(17,20,19,.04);
--shadow-md:0 6px 18px -6px rgba(17,20,19,.14),0 2px 4px rgba(17,20,19,.05);
--shadow-lg:0 24px 48px -16px rgba(17,20,19,.22),0 4px 10px rgba(17,20,19,.06);
--shadow-glow:0 0 0 1px rgba(255,253,245,.9),0 0 12px 2px var(--light-glow);
--shadow-focus:0 0 0 3px rgba(91,179,168,.45);
--ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */
--ease-in-out:cubic-bezier(.6,0,.3,1); /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:480ms; /* @kind other */
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--color-ink)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;margin:0;text-wrap:balance}
h5,h6{font-family:var(--font-label);font-weight:600;text-transform:uppercase;margin:0}
p{margin:0;text-wrap:pretty}
::selection{background:var(--color-mint-300);color:var(--color-ink)}