/* =========================================================
   NAILS BY SANDEEP APP - COMMON
   Design tokens, base elements, buttons, forms.
   Colours: ivory surfaces, deep plum ink, rose + rose-gold accents.
========================================================= */

:root {
    --ivory: #fbf6f1;
    --ivory-2: #f4ece4;
    --card: #ffffff;
    --ink: #2b1626;
    --ink-soft: #4a3345;
    --muted: #7b6674;
    --line: rgba(var(--plum-rgb), 0.1);
    --line-strong: rgba(var(--plum-rgb), 0.18);

    --plum: #3b1530;
    --plum-2: #5d2149;
    --rose: #d6457f;
    --rose-deep: #b02d66;
    --gold: #c9967a;
    --gold-soft: #f0d9cd;

    --success: #1d8c69;
    --success-soft: #e3f4ee;
    --warn: #d6791f;
    --warn-soft: #fcf0df;
    --danger: #c53a4b;
    --danger-soft: #fbe6e9;

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 24px;

    --shadow-sm: 0 1px 2px rgba(var(--plum-rgb), 0.06), 0 4px 12px rgba(var(--plum-rgb), 0.05);
    --shadow: 0 2px 4px rgba(var(--plum-rgb), 0.05), 0 12px 28px rgba(var(--plum-rgb), 0.09);
    --shadow-lg: 0 6px 12px rgba(var(--plum-rgb), 0.08), 0 26px 56px rgba(var(--plum-rgb), 0.16);

    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: Georgia, "Times New Roman", serif;

    --header-h: 64px;
    --nav-h: 84px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* theme helpers (every theme sets these from js/theme.js; these are the safe defaults) */
    --plum-rgb: 59, 21, 48;
    --rose-rgb: 214, 69, 127;
    --rose-deep-rgb: 176, 45, 102;
    --gold-rgb: 201, 150, 122;
    --ivory-rgb: 251, 246, 241;
    --card-rgb: 255, 255, 255;
    --glow1-rgb: 255, 126, 178;
    --glow2-rgb: 233, 185, 163;
    --glass: 0.74; --tint: #f3e5ee; --tint-2: #fbe9f0; --card-end: #fdf4f7;
    --btn-a: #e0558e; --btn-ink: #fff;
    --hero1: #2f1128; --hero2: #4b1a3e; --hero3: #6a2354; --hero-accent: #f6d9c9;
    --s1a: #4a1c40; --s1b: #8e2f66; --s2a: #2f2a73; --s2b: #5b4ab8;
    --s3a: #0d5a49; --s3b: #1f9a76; --s4a: #b03a1c; --s4b: #ec7b30;
    --warn-ink: #a85a0a; --danger-ink: #8d2231;
}

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

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
a, button, [role="button"], input, select, textarea, label { touch-action: manipulation; }
html.dialog-open { overflow: hidden; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--page-bg, var(--ivory));
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.icon { display: block; flex: 0 0 auto; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; border-radius: 6px; }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
    font-weight: 650; font-size: 15px; letter-spacing: 0.01em; white-space: nowrap;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, opacity 0.25s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }

.btn-primary {
    color: var(--btn-ink);
    background: linear-gradient(135deg, var(--btn-a) 0%, var(--rose-deep) 100%);
    box-shadow: 0 8px 20px rgba(var(--rose-deep-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:hover { box-shadow: 0 12px 26px rgba(var(--rose-deep-rgb), 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28); }

.btn-secondary {
    color: var(--ink);
    background: var(--card);
    border-color: var(--line-strong);
}
.btn-secondary:hover { background: var(--ivory-2); }

.btn-danger {
    color: #fff;
    background: linear-gradient(135deg, #d4495a 0%, #b02b3d 100%);
    box-shadow: 0 8px 20px rgba(176, 43, 61, 0.26);
}
.btn-ghost { color: var(--rose-deep); background: transparent; }
.btn-block { width: 100%; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 13.5px; }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: 16px; }
.field-label {
    display: block; margin-bottom: 7px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .icon { position: absolute; left: 16px; color: var(--muted); pointer-events: none; }
.input {
    width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input-wrap > .icon + .input { padding-left: 46px; }
.input:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px rgba(var(--rose-rgb), 0.14); }
.input-toggle {
    position: absolute; right: 6px; width: 42px; height: 42px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: transparent; color: var(--muted);
}
.input-toggle:hover { color: var(--rose-deep); }

/* ---------- chips ---------- */
.chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
    font-size: 11.5px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase;
}
.chip-booked { color: var(--plum-2); background: var(--tint); }
.chip-completed { color: var(--success); background: var(--success-soft); }
.chip-cancelled { color: var(--danger); background: var(--danger-soft); }
.chip-warn { color: var(--warn-ink); background: var(--warn-soft); }
.chip-soft { color: var(--rose-deep); background: var(--tint-2); }

/* ---------- skeleton shimmer ---------- */
.skeleton {
    position: relative; overflow: hidden; border-radius: var(--radius);
    background: linear-gradient(100deg, var(--ivory-2) 30%, var(--card) 50%, var(--ivory-2) 70%);
    background-size: 220% 100%;
    animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -120% 0; } }

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

[hidden] { display: none !important; }

.guest-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--plum-2); background: color-mix(in srgb, var(--rose) 16%, transparent); border: 1px solid color-mix(in srgb, var(--rose) 45%, transparent); }
.guest-badge svg { flex: none; }