/* =========================================================================
   Анна Кавелина — shared design tokens, built from the brand book (v1.0, 2026):
   a warm gradient from sunlit orange through fuchsia into espresso, set
   against a milky-cream canvas and graphite ink. Playfair Display carries
   headings; Montserrat carries everything else, per the brand book's type
   spec. Shared by home.php, booking.php and admin.php. See DESIGN.md for
   the full rationale and Do's/Don'ts.
   ========================================================================= */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/montserrat-400-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/montserrat-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/montserrat-500-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/montserrat-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat-600-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-700-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}

/* Playfair Display — the display face, headings only. Verified native Cyrillic
   coverage before commitment (weights 700 and italic 500 both ship a cyrillic
   subset); Montserrat keeps every other job (body, labels, forms, tables, numerals). */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/playfair-display-700-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/playfair-display-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/playfair-display-500italic-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/playfair-display-500italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}

:root {
    /* -- color: the milky canvas (brand book §04) -- */
    --paper: #FAF5F2;
    --paper-alt: #F5E7DF;
    --surface: #FFFFFF;
    --ink: #2E2B33;
    --ink-soft: #6E6460;
    --ink-faint: #9A8F8D;
    --line: #EAE1D9;
    --line-strong: #D9CCC0;

    /* -- color: the brand's fuchsia accent, spent on confirmed/selected/
       primary-action moments -- */
    --accent: #A40658;
    --accent-hover: #8E0F4A;
    --accent-ink: var(--paper);
    --accent-tint: #F3E0EA;

    /* -- color: the rest of the brand-book palette (§04) — orange and
       espresso anchor the fired gradient; copper and powder are quieter
       secondary tints for decorative use (sparkle, dividers) -- */
    --orange: #F6640A;
    --espresso: #4B2B1E;
    --copper: #BD6257;
    --powder: #E69882;
    --gradient-brand: linear-gradient(90deg, #F6640A 0%, #A40658 55%, #4B2B1E 100%);

    /* -- type -- */
    --font: 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --tnum: 'tnum' 1, 'lnum' 1;

    /* -- spacing scale (4px base) -- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* -- radius: one small, restrained value everywhere. Structural containers
       stay effectively hard-cornered — nothing in this system earns a big
       rounded card the way a shadow-heavy system might. -- */
    --radius: 2px;
    --radius-lg: 2px;
    --radius-pill: 2px;

    /* -- elevation: flat by default; a real photograph gets one soft, quiet
       lift, never a dramatic one. The primary CTA gets the system's only
       other shadow, spent on hover as a small earned moment. -- */
    --shadow-photo: 0 4px 16px -8px rgba(46, 43, 51, 0.18);
    --shadow-glow: 0 8px 20px -10px rgba(164, 6, 88, 0.45);

    /* -- motion -- */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }

button, input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

a { color: var(--accent); }

::selection { background: var(--accent-tint); color: var(--accent-hover); }

/* Firefox's native focus dotted outline reads as browser chrome, not this
   system's own state language — replace with the accent ring everywhere. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--sp-5);
}

.container--wide {
    max-width: 1040px;
}

/* -- numerals: the system's material for anything precise (prices, times,
   dates) — always routed through Inter's tabular figures, never the display
   serif, so numbers stay aligned and legible at a glance -- */
.num {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: var(--tnum);
    font-weight: 700;
}

/* -- shared: small tracked micro-label (step indicator, form labels, kickers) -- */
.microlabel {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* -- shared: a small 4-point spark mark ("Искра", brand book §06) — the
   brand's recurring decorative glyph, used as a kicker prefix or watermark -- */
.spark {
    display: inline-block;
    flex-shrink: 0;
    color: var(--accent);
}
.spark--twinkle { color: var(--copper); }

/* -- shared: buttons -- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    border: 1px solid var(--ink);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.85em 1.5em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease), opacity 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }

.btn-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
}
.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-ink);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}
.btn-primary:disabled {
    background: var(--line-strong);
    border-color: var(--line-strong);
    color: var(--surface);
    cursor: default;
    box-shadow: none;
    transform: none;
}
.btn-primary:disabled:hover { background: var(--line-strong); border-color: var(--line-strong); }

.btn-quiet {
    border-color: transparent;
    padding: 0.6em 0.2em;
    color: var(--ink-soft);
}
.btn-quiet:hover { background: transparent; color: var(--ink); }

/* -- shared: icons -- */
.icon {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* -- shared: hairline-divided option rows (services, masters, generic lists) -- */
.row-list {
    border-top: 1px solid var(--line);
}
.row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-4) var(--sp-1);
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s var(--ease);
}
.row:hover, .row:focus-visible { background: var(--paper-alt); }
.row-title {
    flex: 1 1 auto;
    font-weight: 600;
    font-size: 1.0625rem;
    min-width: 0;
}
.row-meta {
    flex: 0 0 auto;
    text-align: right;
    font-size: 1rem;
    color: var(--ink);
    white-space: nowrap;
}
.row-meta .unit {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    margin-left: 0.15em;
}
.row-chevron { color: var(--ink-faint); }

/* -- shared: notice band (validation nudge, network error, graceful re-offer) -- */
.notice {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    background: var(--paper-alt);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: var(--sp-4);
    font-size: 0.9375rem;
    color: var(--ink);
}
.notice .icon { margin-top: 0.15em; color: var(--ink-soft); }

/* -- shared: form fields --
   Base appearance applies to any matching input/select regardless of a
   .field wrapper, so a bare table-cell input (admin's schedule/service
   rows) matches a labeled standalone field (booking's contact step). */
input[type=text],
input[type=tel],
input[type=time],
input[type=number],
input[type=password],
input[type=file],
select,
textarea {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    padding: 0.85em 0.9em;
    font-size: 1rem;
    font-family: inherit;
    accent-color: var(--accent);
}
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); }

/* Native checkboxes are a confirmed/selected state too — the one accent must
   reach them, or the browser's default blue becomes a second, un-earned hue. */
input[type=checkbox] { accent-color: var(--accent); }

.field { display: block; margin-bottom: var(--sp-4); }
.field label {
    display: block;
    margin-bottom: var(--sp-2);
}
.field input {
    display: block;
    width: 100%;
}