/* ═══════════════════════════════════════════════════════════════════
   FIT & FAB — DESIGN TOKENS
   The single source of truth for colour, type, spacing and elevation,
   shared by BOTH the public site (app.css) and the admin panel
   (admin.css). Loaded first so the layer order below is established
   before any other stylesheet contributes rules.

   Layer order (later = higher priority):
     reset → tokens → base → layout → components → utilities
   Blazor scoped CSS (*.razor.css) is unlayered, so it always wins over
   everything here — that's intentional.
   ═══════════════════════════════════════════════════════════════════ */

@layer reset, tokens, base, layout, components, utilities;

/* ───────────────────────────────────────────────────────────────────
   TOKENS
   Single source of truth. Legacy names (--primary, --radius, …) are
   retained because BookingDetail / About / PaymentSuccess depend on
   them — do not rename without updating those scoped stylesheets.
   ─────────────────────────────────────────────────────────────────── */
@layer tokens {
    :root {
        /* ── Brand ramp ── */
        --pink-50:  #fff5fa;
        --pink-100: #ffe4f1;
        --pink-200: #ffc9e3;
        --pink-300: #ff9ecd;
        --pink-400: #ff5cae;
        --pink-500: #fa1689;  /* core brand */
        --pink-600: #d4116f;
        --pink-700: #a80d58;

        --plum-400: #c07ce8;
        --plum-500: #a04fd2;
        --plum-600: #7b34a8;

        --ink-900: #1c0020;
        --ink-800: #2a002e;
        --ink-700: #45204a;

        /* ── Semantic ── */
        --primary:      var(--pink-500);
        --primary-dark: var(--pink-600);
        --secondary:    var(--plum-500);
        --accent:       #ff6ec7;

        --text:        #333;
        --text-light:  #666;
        --text-subtle: #8b8b8b;
        --text-invert: #fff;

        --surface:        #fff;
        --surface-cream:  #fff9fc;
        --surface-tint:   var(--pink-50);
        --surface-dark:   var(--ink-800);
        --bg-field:       #fdf4f9;

        --border:        #e0d0ea;
        --border-subtle: color-mix(in srgb, var(--primary) 12%, transparent);

        --success: #26b050;
        --danger:  #e50000;
        --warning: #d98500;

        /* ── Admin panel ──
           Separate token set from the public site's tokens above — the
           admin area (Admin/*.razor.css, AdminLayout.razor.css) reads
           these instead of --surface/--text/--border directly, so a dark
           palette can be swapped in below without touching the public
           site (which stays light-only; it was never asked for dark
           mode, only the admin panel was). */
        --admin-bg:         #EEEDFC;
        --admin-surface:    #ffffff;
        --admin-surface-2:  #fafafa;
        --admin-hover:      #f4f4f7;
        --admin-border:     #eadff0;
        --admin-text:       #222222;
        --admin-text-light: #888888;
        --admin-shadow:     0 3px 12px rgba(250, 22, 137, 0.10);
        --admin-shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.06);
        --admin-shadow-md:  0 6px 22px rgba(250, 22, 137, 0.14);

        /* ── Fluid type scale (clamp = no breakpoint juggling) ── */
        --step--1: clamp(0.79rem, 0.77rem + 0.10vw, 0.85rem);
        --step-0:  clamp(0.94rem, 0.91rem + 0.14vw, 1.02rem);
        --step-1:  clamp(1.13rem, 1.07rem + 0.28vw, 1.30rem);
        --step-2:  clamp(1.35rem, 1.25rem + 0.50vw, 1.65rem);
        --step-3:  clamp(1.62rem, 1.45rem + 0.85vw, 2.10rem);
        --step-4:  clamp(1.94rem, 1.67rem + 1.36vw, 2.70rem);
        --step-5:  clamp(2.33rem, 1.90rem + 2.10vw, 3.45rem);

        /* ── Spacing (fluid) ── */
        --space-2xs: clamp(0.25rem, 0.24rem + 0.06vw, 0.31rem);
        --space-xs:  clamp(0.50rem, 0.48rem + 0.11vw, 0.63rem);
        --space-sm:  clamp(0.75rem, 0.71rem + 0.17vw, 0.94rem);
        --space-md:  clamp(1.00rem, 0.95rem + 0.23vw, 1.25rem);
        --space-lg:  clamp(1.50rem, 1.43rem + 0.34vw, 1.88rem);
        --space-xl:  clamp(2.00rem, 1.90rem + 0.45vw, 2.50rem);
        --space-2xl: clamp(3.00rem, 2.86rem + 0.68vw, 3.75rem);
        --space-3xl: clamp(4.00rem, 3.81rem + 0.91vw, 5.00rem);

        /* ── Typography ── */
        /* Body: Inter (clean, readable). Headings: Poppins (friendly, modern). */
        --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        --font-display: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        --tracking-wide: 0.07em;
        --tracking-wider: 0.14em;
        --leading-tight: 1.15;
        --leading-body: 1.7;

        /* ── Radii ── */
        --radius: 4px;          /* legacy — used by booking forms */
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 18px;
        --radius-xl: 26px;
        --radius-pill: 999px;

        /* ── Elevation (pink-tinted, matches brand) ── */
        --shadow-xs: 0 1px 3px rgba(250, 22, 137, 0.08);
        --shadow-sm: 0 3px 12px rgba(250, 22, 137, 0.10);
        --shadow-md: 0 6px 22px rgba(250, 22, 137, 0.14);
        --shadow-lg: 0 14px 38px rgba(250, 22, 137, 0.20);
        --shadow-xl: 0 24px 60px rgba(250, 22, 137, 0.26);

        /* ── Motion ── */
        --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --dur-fast: 150ms;
        --dur: 250ms;
        --dur-slow: 450ms;

        /* ── Layout ── */
        --container: 1440px;
        --container-narrow: 820px;
        --gutter: clamp(1rem, 4vw, 2.5rem);
        --header-h: 76px;

        /* ── Gradients ── */
        --grad-brand: linear-gradient(135deg, var(--pink-500) 0%, var(--plum-500) 100%);
        --grad-pink: linear-gradient(135deg, var(--pink-500) 0%, var(--pink-600) 100%);
        --grad-page: linear-gradient(160deg, #ffbada 0%, #fce4ec 55%, #f8bbd9 100%);
    }

    /* Admin panel only — the public site (marketing pages) stays
       light-only; it was never asked for dark mode.

       App.razor stamps data-theme="dark"/"light" on <html> as the very
       first thing in <head> (before anything paints), from either the
       staff member's own switch (persisted in localStorage) or, the
       first time they ever open the admin panel, their OS/browser
       preference. So in practice data-theme is always present and this
       attribute selector is what actually drives dark mode.

       The prefers-color-scheme block underneath is just a safety net for
       the rare case JS hasn't run yet — same values, so there's no
       flash-of-different-dark-mode between the two. */
    :root[data-theme="dark"] {
        --admin-bg:         #16141d;
        --admin-surface:    #211e29;
        --admin-surface-2:  #2a2632;
        --admin-hover:      #322d3b;
        --admin-border:     #3b3546;
        --admin-text:       #f1eef7;
        --admin-text-light: #a89fb5;
        --admin-shadow:     0 3px 14px rgba(0, 0, 0, 0.45);
        --admin-shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.35);
        --admin-shadow-md:  0 6px 22px rgba(0, 0, 0, 0.5);
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            --admin-bg:         #16141d;
            --admin-surface:    #211e29;
            --admin-surface-2:  #2a2632;
            --admin-hover:      #322d3b;
            --admin-border:     #3b3546;
            --admin-text:       #f1eef7;
            --admin-text-light: #a89fb5;
            --admin-shadow:     0 3px 14px rgba(0, 0, 0, 0.45);
            --admin-shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.35);
            --admin-shadow-md:  0 6px 22px rgba(0, 0, 0, 0.5);
        }
    }
}

/* ───────────────────────────────────────────────────────────────────
   BOOKING STATUS PALETTE
   The *-solid values are for calendar event blocks and legend dots,
   which need one opaque colour rather than a bg/fg pair.
   ─────────────────────────────────────────────────────────────────── */
@layer tokens {
    :root {
        --status-pending-bg: #fff3cd;
        --status-pending-fg: #856404;
        --status-review-bg:  #cfe2ff;
        --status-review-fg:  #084298;
        --status-paid-bg:    #d1e7dd;
        --status-paid-fg:    #0f5132;
        --status-failed-bg:  #f8d7da;
        --status-failed-fg:  #842029;

        --status-pending-solid: #6b7280;
        --status-review-solid:  #084298;
        --status-paid-solid:    #0f766e;
        --status-failed-solid:  #b91c1c;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SELF-HOSTED WEBFONTS
   Latin subset only, served from /fonts. The unicode-range values are
   Google's own, so out-of-range glyphs still fall back rather than
   rendering as tofu.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-400.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: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-500.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: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-600.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: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-700.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: 500;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-500.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: 600;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-600.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: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/poppins-500.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: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/poppins-600.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: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/poppins-700.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: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/poppins-800.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;
}