/* Self-hosted so the render is not blocked on fonts.googleapis.com.
   latin-ext is mandatory here — it carries ą ć ę ł ń ś ź ż. */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Barbers Lab — Design System v3 · token layer
   Transcribed from the design system project (tokens/*.css).
   Ink is the ground. Paper is punctuation. Amber is the only accent.
   ========================================================================== */

:root {
    /* — Brand accent: the amber of the Barbers Lab mark — */
    --bl-amber: #E58F05;
    --bl-amber-600: #C97C04;
    --bl-amber-400: #F2A62B;
    --bl-amber-200: #F8D08A;
    --bl-amber-050: #FCF1DD;

    /* — Ink: the default ground. Printed black, softened. Never #000. — */
    --bl-ink: #141414;
    --bl-ink-900: #1C1C1C;
    --bl-ink-800: #242424;
    --bl-ink-700: #333333;
    --bl-ink-600: #4A4A4A;

    /* — Paper: the accent surface, used sparingly. — */
    --bl-paper: #ECE8DD;
    --bl-paper-alt: #E2DDD0;
    --bl-paper-bright: #F6F4EE;
    --bl-white: #FFFFFF;

    /* — Greys — */
    --bl-grey-600: #6E6A62;
    --bl-grey-500: #8B8780;
    --bl-grey-400: #A9A59D;
    --bl-grey-300: #C7C2B8;

    /* — Semantic: surface. INK IS THE PAGE. — */
    --surface-page: var(--bl-ink);
    --surface-block: var(--bl-paper);
    --surface-accent: var(--bl-amber);
    --surface-card: var(--bl-ink-900);
    --surface-inset: var(--bl-ink-800);

    /* — Semantic: text — */
    --text-primary: var(--bl-paper);
    --text-secondary: var(--bl-grey-400);
    --text-muted: var(--bl-grey-500);
    --text-accent: var(--bl-amber);
    --text-on-accent: var(--bl-ink);
    --text-on-block: var(--bl-ink);

    /* — Semantic: line — */
    --line-hairline: rgba(236, 232, 221, .18);
    --line-strong: rgba(236, 232, 221, .42);
    --line-rule: var(--bl-paper);
    --line-accent: var(--bl-amber);

    /* — Status — */
    --status-open: #4E9A5B;
    --status-busy: var(--bl-amber);
    --status-closed: #B8493B;

    /* — Type — */
    --font-poster: "Anton", "Archivo Black", Impact, sans-serif;
    --font-display: "Archivo Black", "Archivo", Helvetica, sans-serif;
    --font-sans: "Archivo", Helvetica, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    /* Mobile-first scale. Posters go big: the hero touches both gutters. */
    --fs-poster: clamp(64px, 19vw, 220px);
    --fs-hero: clamp(48px, 14vw, 150px);
    --fs-display: clamp(36px, 10vw, 96px);
    --fs-h1: clamp(28px, 7.5vw, 64px);
    --fs-h2: clamp(22px, 5.5vw, 40px);
    --fs-h3: 19px;
    --fs-h4: 16px;
    --fs-body-lg: 16px;
    --fs-body: 14px;
    --fs-body-sm: 12px;
    --fs-label: 11px;
    --fs-label-lg: 12px;
    --fs-micro: 9px;

    /* Line heights — poster type is set solid */
    --lh-poster: 0.82;
    --lh-hero: 0.86;
    --lh-display: 0.92;
    --lh-heading: 1.02;
    --lh-snug: 1.35;
    --lh-body: 1.6;
    --lh-label: 1.15;

    /* Tracking */
    --ls-poster: -0.02em;
    --ls-display: -0.03em;
    --ls-heading: -0.02em;
    --ls-body: 0;
    --ls-label: 0.16em;
    --ls-label-wide: 0.26em;

    /* — Spacing: 4px base — */
    --sp-0: 0px;
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;
    --sp-32: 128px;

    --gutter: 18px;
    --gutter-lg: 40px;
    --content-max: 1360px;
    --section-y: var(--sp-16);
    --section-y-lg: var(--sp-24);
    --tap-min: 48px;

    /* Square. Radius is not part of this brand. */
    --radius-0: 0px;
    --radius-sm: 0px;
    --radius-pill: 999px;

    --bw-hair: 1px;
    --bw-strong: 2px;
    --bw-block: 4px;

    /* — Effects. Depth is a hard offset or a colour block behind. — */
    --shadow-none: none;
    --shadow-hard: 8px 8px 0 var(--bl-ink);
    --shadow-hard-amber: 8px 8px 0 var(--bl-amber);
    --shadow-lift: 0 16px 40px rgba(20, 20, 20, .22);

    --scrim-bottom: linear-gradient(180deg, rgba(20, 20, 20, 0) 40%, rgba(20, 20, 20, .78) 100%);
    --scrim-full: linear-gradient(180deg, rgba(20, 20, 20, .35) 0%, rgba(20, 20, 20, .75) 100%);

    /* Photography is in colour. The studio's own warm light does the work. */
    --img-filter: contrast(1.06) saturate(1.02);
    --img-filter-hard: contrast(1.12) saturate(1.08);
    --img-filter-mono: grayscale(1) contrast(1.2);

    --grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.42'/></svg>");
    --grain-opacity: 0.055;

    --rule-thin: 1px;
    --rule-mid: 2px;
    --rule-thick: 4px;
    --rule-block: 10px;

    /* — Motion. Short and mechanical. No bounce, no spring, no overshoot. — */
    --dur-instant: 90ms;
    --dur-fast: 160ms;
    --dur-base: 240ms;
    --dur-slow: 420ms;
    --dur-reveal: 720ms;
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-mechanical: cubic-bezier(.16, 1, .3, 1);
    --marquee-dur: 28s;

    /* ——————————————————————————————————————————————————————————
       Legacy aliases. kariera/kariera.css reads these nine names;
       mapping them onto v3 values upgrades that page instead of
       breaking it. Do not use them in new work.
       —————————————————————————————————————————————————————————— */
    --primary: var(--bl-amber);
    --primary-light: var(--bl-amber-400);
    --dark: var(--bl-ink);
    --dark-light: var(--bl-ink-900);
    --dark-lighter: var(--bl-ink-800);
    --text-light: var(--bl-paper);
    --text-gray: var(--bl-grey-400);
    --mono: var(--font-mono);
    --radius-sharp: 0px;
    --border-subtle: var(--line-hairline);
    --border-hover: var(--line-strong);
}

@media (min-width: 900px) {
    :root {
        --gutter: var(--gutter-lg);
        --section-y: var(--section-y-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
        --dur-reveal: 0ms;
        --marquee-dur: 0s;
    }
}

/* ==========================================================================
   Theme scopes — switch surfaces with data-theme, never by hand-picking colours
   ========================================================================== */

/* Ink block — the default ground. Stated explicitly so an ink band nested
   inside a paper or amber scope resets correctly. */
[data-theme="ink"] {
    --surface-page: var(--bl-ink);
    --surface-card: var(--bl-ink-900);
    --surface-inset: var(--bl-ink-800);
    --text-primary: var(--bl-paper);
    --text-secondary: var(--bl-grey-400);
    --text-muted: var(--bl-grey-500);
    --text-accent: var(--bl-amber);
    --line-hairline: rgba(236, 232, 221, .18);
    --line-strong: rgba(236, 232, 221, .42);
    --line-rule: var(--bl-paper);
}

/* Paper block — the light band. One or two sections per page, no more. */
[data-theme="paper"] {
    --surface-page: var(--bl-paper);
    --surface-card: var(--bl-paper-bright);
    --surface-inset: var(--bl-paper-alt);
    --text-primary: var(--bl-ink);
    --text-secondary: var(--bl-grey-600);
    --text-muted: var(--bl-grey-500);
    --line-hairline: rgba(20, 20, 20, .16);
    --line-strong: rgba(20, 20, 20, .42);
    --line-rule: var(--bl-ink);
}

/* Amber block — the one loud panel. Text on it is always ink. */
[data-theme="amber"] {
    --surface-page: var(--bl-amber);
    --surface-card: var(--bl-amber);
    --surface-inset: var(--bl-amber-600);
    --text-primary: var(--bl-ink);
    --text-secondary: rgba(20, 20, 20, .72);
    --text-muted: rgba(20, 20, 20, .55);
    --text-accent: var(--bl-ink);
    --line-hairline: rgba(20, 20, 20, .25);
    --line-strong: rgba(20, 20, 20, .5);
    --line-rule: var(--bl-ink);
}