/* Direction: Auréa — luxury day spa. Warm beige paper, deep charcoal, sage green actions, gold hairlines */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f3ece0;
  --surface: #fbf7f0;
  --surface-2: #eae1d1;
  --border: #dccfb9;
  --border-strong: #adaaa0;
  --ink: #25282b;
  --muted: #645f57;
  --accent: #4f6b55;
  --accent-hover: #435b48;
  --accent-ink: #ffffff;
  --accent-text: #41594a;
  --accent-strong: #4f6b55;
  --accent-soft: #dde6d6;
  --accent-border: #a9b2a1;
  --success: #4f7a58;
  --success-ink: #ffffff;
  --success-soft: #dfded0;
  --success-strong: #43674b;
  --warning: #b0842a;
  --warning-ink: #25282b;
  --warning-soft: #ebe0ca;
  --warning-strong: #7e5e1e;
  --danger: #a8483d;
  --danger-ink: #ffffff;
  --danger-soft: #ead8cc;
  --danger-strong: #9b4238;
  --chart-1: #4f6b55;
  --chart-2: #068d9f;
  --chart-3: #344493;
  --chart-4: #a1589a;
  --chart-5: #86281b;
  --chart-6: #927719;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --radius-card: 22px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow-card: 0 12px 32px -22px rgba(37, 40, 43, 0.4);
  --x-charcoal: #1f2225;
  --x-on-photo: #f6efe3;
  --x-gold: #b9975b;
  --x-gold-soft: #dcc48f;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Jost", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #0b0f0c;
  --surface: #232724;
  --surface-2: #171b18;
  --border: #2d312e;
  --border-strong: #545755;
  --ink: #f3ece0;
  --muted: #96948b;
  --accent: #4f6b55;
  --accent-hover: #69816f;
  --accent-ink: #ffffff;
  --accent-text: #819586;
  --accent-strong: #819586;
  --accent-soft: #1a231c;
  --accent-border: #2a382d;
  --success: #4f7a58;
  --success-ink: #ffffff;
  --success-soft: #1a271d;
  --success-strong: #76987c;
  --warning: #b0842a;
  --warning-ink: #ffffff;
  --warning-soft: #2f2913;
  --warning-strong: #b68e3b;
  --danger: #a8483d;
  --danger-ink: #ffffff;
  --danger-soft: #2e1c17;
  --danger-strong: #c07b74;
  --chart-1: #5a7760;
  --chart-2: #2399ab;
  --chart-3: #647acd;
  --chart-4: #ae64a7;
  --chart-5: #c15f4f;
  --chart-6: #a18219;
}

.nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.9rem; border-radius: 14px; color: var(--x-on-photo); opacity: 0.78; transition: background 0.2s, opacity 0.2s; font-size: 0.95rem; }
.nav-link:hover { background: rgba(255, 255, 255, 0.07); opacity: 1; }
.nav-link:focus-visible { outline: 2px solid var(--x-gold); outline-offset: 2px; }
.nav-link.active { background: color-mix(in srgb, var(--x-gold) 20%, transparent); opacity: 1; box-shadow: inset 2px 0 0 var(--x-gold); }
.gold-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--x-gold), transparent); }
.gold-text { color: var(--x-gold-soft); }
.eyebrow { letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.7rem; color: var(--accent-text); font-weight: 500; }
.eyebrow-gold { letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.7rem; color: var(--x-gold-soft); font-weight: 500; }
.st { --c: var(--muted); display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 500; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--ink); white-space: nowrap; }
.st::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 99px; background: var(--c); }
.st-Pending, .st-Unpaid, .st-low { --c: var(--warning); }
.st-Confirmed, .st-info { --c: var(--accent); }
.st-Completed, .st-Paid, .st-ok { --c: var(--success); }
.st-Cancelled, .st-Refunded, .st-out { --c: var(--danger); }
.hero-veil { background: linear-gradient(100deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.25)); }
.card-veil { background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%); }
.bar { transform-origin: bottom; animation: grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hbar { transform-origin: left; animation: growx 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes grow { from { transform: scaleY(0.05); } }
@keyframes growx { from { transform: scaleX(0.05); } }
html.reduced-motion .bar, html.reduced-motion .hbar { animation: none; }
.lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.lift:hover { transform: translateY(-3px); }
.role-card { transition: border-color 0.2s, background 0.2s; }
dialog.modal { max-width: min(680px, calc(100vw - 1.5rem)); width: 100%; max-height: 92vh; overflow-y: auto; }
.appt-chip { display: block; width: 100%; text-align: left; border-left: 3px solid var(--x-gold); transition: transform 0.2s; }
.appt-chip:hover { transform: translateX(2px); }
.appt-chip.s-Confirmed { border-left-color: var(--accent); }
.appt-chip.s-Completed { border-left-color: var(--success); }
.appt-chip.s-Cancelled { border-left-color: var(--danger); opacity: 0.65; }