/* ==========================================================================
   StudioFELI 3.0 – core: fonts, tokens, base and shared components.
   Back to the v1 identity: velvet green (the salon chairs), cool porcelain,
   blush (hair colour) and chrome (mirror frames). Signature: the arched mirror.

   FONTS: Bodoni Moda (display, optical sizes) and Figtree (text) are self-hosted
   from assets/fonts (SIL Open Font License, see assets/fonts/OFL-*.txt).
   No third-party font requests.
   ========================================================================== */

@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/BodoniModa-opsz-normal.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('../assets/fonts/BodoniModa-opsz-italic.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../assets/fonts/Figtree-wght-normal.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
    --velvet: #2F3B30;
    --velvet-deep: #232D24;
    --velvet-soft: #3C4A3D;
    --porcelain: #EDEEEA;
    --paper: #F8F8F5;
    --white: #FFFFFF;
    --blush: #E6C4B8;
    --blush-soft: #F4E4DD;
    --blush-deep: #9C5F4E;
    --accent-text: #8A4F3F;         /* rosewood for text on light surfaces, >= 5:1 */
    --chrome: #8E969A;              /* mirror frames – decoration only */
    --ink: #1C1D1A;
    --ink-soft: #464A44;
    --ink-muted: #5C605A;           /* >= 4.5:1 on paper, porcelain and blush-soft */
    --line: #D6D9D2;                /* decoration only */
    --line-strong: #B9BDB5;
    --line-on-dark: rgba(237, 238, 234, 0.22);
    --field-border: #7F857D;        /* >= 3:1 on white */
    --danger: #A33A2E;
    --success: #3F6B47;
    --focus: #9C5F4E;

    --font-display: 'Bodoni Moda', 'Bodoni 72', 'Bodoni MT', 'Didot', Georgia, serif;
    --font-body: 'Figtree', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

    /* Type scale: minor third for text, larger display steps (v1) */
    --step--1: 0.875rem;
    --step-0: 1rem;
    --step-1: 1.25rem;
    --step-2: 1.563rem;
    --step-h3: 1.375rem;
    --step-3: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
    --step-4: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
    --section-y: clamp(4rem, 9vw, 8rem);
    --gutter: clamp(1rem, 4vw, 3rem);
    --max: 1240px;
    --radius-s: 4px;
    --radius-m: 10px;
    --radius-img: 14px;                    /* all photos: rectangles with softly rounded corners, never round */
    --header-h: 68px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --t-fast: 150ms; --t-med: 250ms; --t-slow: 400ms;
}

/* Surfaces that are dark set a light focus ring (>= 7:1 on velvet). */
.on-dark { --focus: var(--blush); color: var(--paper); }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    font-optical-sizing: auto;
}
@media (min-width: 900px) { body { font-size: 1.0625rem; } }   /* 17px */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.12; }
h2 { font-family: var(--font-display); font-size: var(--step-4); letter-spacing: -0.01em; }
h3 { font-family: var(--font-body); font-size: var(--step-h3); font-weight: 600; }
p { max-width: 62ch; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
figure { margin: 0; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
body.no-scroll { overflow: hidden; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s4); top: -100px; z-index: 300; padding: var(--s3) var(--s5); background: var(--blush); color: var(--ink); border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: var(--s3); }

/* The arch, in miniature: logo and admin login */
.monogram {
    display: grid; place-items: center; width: 38px; height: 46px; padding-top: 6px;
    border: 1.5px solid currentColor; border-radius: 19px 19px 3px 3px;
    font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: 48px; padding: 0 var(--s6);
    border: 1.5px solid var(--velvet); border-radius: 999px;
    background: var(--velvet); color: var(--paper);
    font-weight: 600; text-decoration: none; line-height: 1.2; text-align: center;
    transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background: var(--velvet-deep); border-color: var(--velvet-deep); }
@media (prefers-reduced-motion: no-preference) { .btn { transition-property: background-color, color, border-color, transform; } .btn:active:not([disabled]) { transform: scale(0.98); } }
.btn--secondary { background: transparent; color: var(--velvet); border-color: var(--field-border); }
.btn--secondary:hover { background: var(--velvet); border-color: var(--velvet); color: var(--paper); }
.btn--on-dark { background: var(--blush); border-color: var(--blush); color: var(--velvet-deep); }
.btn--on-dark:hover { background: #F0D6CD; border-color: #F0D6CD; }
.btn--outline-dark { background: transparent; border-color: rgba(237, 238, 234, 0.55); color: var(--paper); }
.btn--outline-dark:hover { background: rgba(237, 238, 234, 0.1); border-color: var(--paper); }
.btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger); color: var(--white); border-color: var(--danger); }
.btn--sm { min-height: 44px; padding: 0 var(--s5); font-size: var(--step--1); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.text-link { color: var(--accent-text); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.text-link:hover { text-decoration-thickness: 2px; }
.on-dark .text-link { color: var(--blush); }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field > label, .field > .label { font-weight: 600; font-size: var(--step--1); }
.field .optional { font-weight: 400; color: var(--ink-muted); }
.hint, .field .hint { font-size: var(--step--1); color: var(--ink-muted); }
.input, .field input, .field select, .field textarea {
    width: 100%; min-height: 48px; padding: var(--s3) var(--s4);
    background: var(--white); border: 1.5px solid var(--field-border); border-radius: var(--radius-s);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--velvet); }
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }
.field [aria-invalid='true'] { border-color: var(--danger); border-width: 2px; }
.field-error { color: var(--danger); font-size: var(--step--1); font-weight: 500; }
.field-error:empty { display: none; }
.field-error::before { content: '! '; font-weight: 700; }

/* ---------- Badges, banner, notices ---------- */
.badge { display: inline-block; padding: 2px var(--s3); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; line-height: 1.5; background: var(--porcelain); color: var(--ink-soft); border: 1px solid var(--line); white-space: nowrap; }
.badge--confirmed { background: #E4EFE5; color: #24502B; border-color: #B9D3BC; }
.badge--cancelled, .badge--no_show { background: #F6E1DD; color: #7C2A20; border-color: #E4B8B0; }
.badge--completed { background: var(--porcelain); color: var(--ink-soft); }
.badge--consult { background: var(--blush-soft); color: #6E3A2D; border-color: #E2C3B6; }

.demo-banner { background: var(--blush); color: var(--velvet-deep); font-size: var(--step--1); padding: var(--s2) var(--gutter); text-align: center; line-height: 1.45; }
.demo-banner strong { font-weight: 700; }
.demo-banner a { color: var(--velvet-deep); font-weight: 600; }
.notice { padding: var(--s4) var(--s5); border-radius: var(--radius-m); border: 1.5px solid var(--line); background: var(--white); color: var(--ink); }
.notice--warn { border-color: var(--blush-deep); background: #FBF0EB; }
.notice--error { border-color: var(--danger); background: #FBEDEA; color: #6E2018; }

/* ---------- Native dialog ---------- */
dialog {
    width: min(580px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto;
    margin: auto; padding: var(--s6);
    background: var(--paper); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: 0 24px 60px rgba(28, 29, 26, 0.3);
}
dialog::backdrop { background: rgba(35, 45, 36, 0.6); }
.dialog-head { display: flex; justify-content: space-between; align-items: start; gap: var(--s4); margin-bottom: var(--s5); }
.dialog-head h2 { font-size: var(--step-3); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}