/* ============================================================
   SB SALOON — DESIGN TOKENS
   Direction: warm charcoal salon interior, not pure-black tech-dark.
   Accent pairing: burnished copper (fixtures/tools) + deep wine (chairs/velvet).
   Signature motif: "the arch" — salon mirror/doorway arch used as a
   recurring frame for hero media, staff photos, and section dividers.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* --- Surfaces --- */
  --bg-base:        #14100D;   /* warm charcoal-brown, not pure black */
  --bg-elevated:     #1F1913;   /* cards, header */
  --bg-elevated-2:   #29211A;   /* modals, inputs */
  --bg-hairline:     #3A2F26;   /* dividers */

  /* --- Accents --- */
  --accent-copper:      #C17A4F;   /* primary accent — fixtures, CTAs */
  --accent-copper-dim:  #8C5B3C;
  --accent-wine:        #7A2E3D;   /* secondary accent — used sparingly */
  --accent-wine-dim:    #5A2130;

  /* --- Text --- */
  --text-primary:   #EDE6DD;
  --text-secondary: #C4B9AC;
  --text-muted:     #8F8377;
  --text-on-accent: #14100D;

  /* --- Status --- */
  --status-confirmed: #7C9473;
  --status-pending:   #C1974F;
  --status-cancelled: #A85C5C;

  /* --- Type --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* --- Radius / arch motif --- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-arch: 999px 999px 12px 12px; /* rounded top, soft bottom — doorway arch */

  /* --- Shadow --- */
  --shadow-soft: 0 12px 40px -12px rgba(0,0,0,0.55);
  --shadow-lift: 0 4px 16px -4px rgba(0,0,0,0.4);

  /* --- Spacing scale --- */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.6rem;
  --space-4: 2.4rem;
  --space-5: 4rem;
  --space-6: 6.4rem;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-base);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.15;
  margin:0 0 var(--space-2);
  color:var(--text-primary);
}
h1{ font-size:clamp(2.4rem, 5vw, 4.2rem); font-weight:500; }
h2{ font-size:clamp(1.8rem, 3vw, 2.6rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 var(--space-2); color:var(--text-secondary); }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }
button, input, select, textarea{ font-family:var(--font-body); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-copper);
}

.container{ max-width:1180px; margin:0 auto; padding:0 var(--space-3); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-1);
  padding:0.85rem 1.8rem;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  font-family:var(--font-body); font-weight:600; font-size:0.95rem;
  cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:focus-visible{ outline:2px solid var(--accent-copper); outline-offset:2px; }
.btn-primary{ background:var(--accent-copper); color:var(--text-on-accent); }
.btn-primary:hover{ background:#D3895D; transform:translateY(-1px); }
.btn-ghost{ background:transparent; border-color:var(--bg-hairline); color:var(--text-primary); }
.btn-ghost:hover{ border-color:var(--accent-copper); color:var(--accent-copper); }
.btn-wine{ background:var(--accent-wine); color:var(--text-primary); }
.btn-wine:hover{ background:#8F3648; }
.btn:disabled{ opacity:0.45; cursor:not-allowed; transform:none; }

/* The arch — signature framing device */
.arch-frame{
  border-radius:var(--radius-arch);
  overflow:hidden;
  position:relative;
  background:var(--bg-elevated);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* Visible focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent-copper);
  outline-offset:2px;
}