/* ==========================================================================
   Princess Beauty Saloon — base.css
   Design tokens, reset, typography, layout primitives, utilities
   ========================================================================== */

:root{
  /* ---- Brand ---- */
  --black:#0B0B0B;
  --black-soft:#151515;
  --black-800:#1F1F1F;
  --gold:#C9A227;
  --gold-light:#E4CB7C;
  --gold-dark:#9C7C15;
  --champagne:#F6EEDC;
  --pink:#E91E8C;
  --pink-light:#FF6BB5;
  --pink-dark:#B7146C;
  --blush:#FDEBF5;
  --white:#FFFFFF;

  /* ---- Neutrals (admin + UI chrome) ---- */
  --n-50:#FAFAFB;
  --n-100:#F4F4F6;
  --n-200:#E8E8EC;
  --n-300:#D5D5DC;
  --n-400:#A8A8B3;
  --n-500:#77777F;
  --n-600:#55555C;
  --n-700:#3A3A40;
  --n-900:#141416;

  /* ---- Status ---- */
  --success:#12A150;
  --success-bg:#E6F6ED;
  --warning:#E8A317;
  --warning-bg:#FDF3E0;
  --danger:#DC3545;
  --danger-bg:#FCEAEC;
  --info:#2F6FED;
  --info-bg:#EAF1FE;

  /* ---- Typography ---- */
  --font-script:'Great Vibes', 'Brush Script MT', cursive;
  --font-serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ---- Spacing scale ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;
  --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;

  /* ---- Radii ---- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:999px;

  /* ---- Shadows ---- */
  --sh-xs:0 1px 2px rgba(11,11,11,.06);
  --sh-sm:0 2px 8px rgba(11,11,11,.06);
  --sh-md:0 6px 20px rgba(11,11,11,.08);
  --sh-lg:0 16px 40px rgba(11,11,11,.12);
  --sh-gold:0 8px 24px rgba(201,162,39,.28);
  --sh-pink:0 8px 24px rgba(233,30,140,.24);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.16s var(--ease);
  --t:.26s var(--ease);
  --t-slow:.45s var(--ease);

  /* ---- Layout ---- */
  --wrap:1200px;
  --wrap-narrow:820px;
  --header-h:72px;
  --bottomnav-h:64px;
  --sidebar-w:248px;
  --sidebar-w-collapsed:72px;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  color:var(--n-700);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;}
h1,h2,h3,h4,h5{margin:0 0 var(--s-3);color:var(--black);line-height:1.2;font-weight:700;}
p{margin:0 0 var(--s-4);}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;padding:0;}
table{border-collapse:collapse;width:100%;}
hr{border:none;border-top:1px solid var(--n-200);margin:var(--s-6) 0;}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px;border-radius:var(--r-sm);}

/* ---- Type scale ---- */
.display{font-family:var(--font-serif);font-size:clamp(2.25rem,6vw,4rem);line-height:1.05;letter-spacing:-.02em;}
h1,.h1{font-family:var(--font-serif);font-size:clamp(1.9rem,4.5vw,3rem);}
h2,.h2{font-family:var(--font-serif);font-size:clamp(1.6rem,3.4vw,2.25rem);}
h3,.h3{font-family:var(--font-serif);font-size:clamp(1.2rem,2.2vw,1.5rem);}
h4,.h4{font-family:var(--font-sans);font-size:1.0625rem;font-weight:700;letter-spacing:.01em;}
.script{font-family:var(--font-script);font-weight:400;line-height:1;}
.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:var(--s-3);display:block;
}
.lead{font-size:1.0625rem;color:var(--n-600);}
.muted{color:var(--n-500);}
.small{font-size:.8125rem;}
.tiny{font-size:.6875rem;}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}

/* ---- Layout primitives ---- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5);}
.wrap-narrow{max-width:var(--wrap-narrow);}
.section{padding-block:var(--s-16);}
.section-sm{padding-block:var(--s-10);}
.section-head{text-align:center;max-width:640px;margin:0 auto var(--s-10);}
.section-head p{color:var(--n-500);margin-bottom:0;}
.grid{display:grid;gap:var(--s-5);}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.g-5{grid-template-columns:repeat(5,1fr);}
.flex{display:flex;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-1{gap:var(--s-1);} .gap-2{gap:var(--s-2);} .gap-3{gap:var(--s-3);}
.gap-4{gap:var(--s-4);} .gap-5{gap:var(--s-5);} .gap-6{gap:var(--s-6);}
.wrapflex{flex-wrap:wrap;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.mt-2{margin-top:var(--s-2);} .mt-3{margin-top:var(--s-3);}
.mt-4{margin-top:var(--s-4);} .mt-6{margin-top:var(--s-6);} .mt-8{margin-top:var(--s-8);}
.mb-2{margin-bottom:var(--s-2);} .mb-4{margin-bottom:var(--s-4);} .mb-6{margin-bottom:var(--s-6);}
.full{width:100%;}
.hidden{display:none !important;}

/* ---- Brand text helpers ---- */
.t-gold{color:var(--gold);}
.t-gold-dark{color:var(--gold-dark);}
.t-pink{color:var(--pink);}
.t-white{color:var(--white);}
.t-black{color:var(--black);}
.gold-rule{
  width:64px;height:2px;margin:var(--s-4) auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.bg-black{background:var(--black);color:rgba(255,255,255,.78);}
.bg-black h1,.bg-black h2,.bg-black h3,.bg-black h4{color:var(--white);}
.bg-cream{background:var(--champagne);}
.bg-blush{background:var(--blush);}
.bg-soft{background:var(--n-50);}

/* ---- Scroll reveal ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .reveal{opacity:1;transform:none;}
}

/* ---- Responsive grid collapse ---- */
@media (max-width:1024px){
  .g-5{grid-template-columns:repeat(3,1fr);}
  .g-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .section{padding-block:var(--s-12);}
  .g-5,.g-4,.g-3{grid-template-columns:repeat(2,1fr);}
  .g-2{grid-template-columns:1fr;}
  .section-head{margin-bottom:var(--s-8);}
}
@media (max-width:520px){
  .g-5,.g-4,.g-3{grid-template-columns:1fr;}
}

/* ---- Responsive gap utilities ----
   Inline style="gap:56px" survives every media query and leaves enormous dead
   space on a phone. Use these instead so the gap can respond. */
.gap-lg{gap:var(--s-12);}
.gap-xl{gap:var(--s-16);}
@media (max-width:760px){
  .gap-lg{gap:var(--s-6);}
  .gap-xl{gap:var(--s-8);}
}

/* ==========================================================================
   GRID / FLEX SHRINK SAFETY NET
   Grid and flex items default to min-width:auto — "never shrink below my
   content". A form input's intrinsic min-content width, or a nowrap badge,
   therefore forces its whole track wider than the container and the page
   scrolls sideways. This was blowing out the contact form and the staff
   cards at tablet width. min-width:0 restores normal shrinking.
   ========================================================================== */
.grid > *{min-width:0;}
.input,.select,.textarea{min-width:0;}
.field,.field-row,.field-row > *{min-width:0;}

/* Scoped, NOT blanket: `.flex > *{min-width:0}` let text collapse to zero
   width, because a shrinkable item with no flex-basis has nothing holding it
   open. Only the parts that should absorb slack get to shrink; the value and
   the badge keep their content width. */
.kv{min-width:0;gap:2px var(--s-3);flex-wrap:wrap;}
/* The label keeps at least 40% of the row. A long value (a full working-hours
   string) can then no longer starve it to a few pixels — it wraps onto its
   own line instead. */
.kv > span:first-child{flex:1 1 auto;min-width:40%;overflow-wrap:anywhere;}
.kv b{flex:0 0 auto;max-width:100%;text-align:right;overflow-wrap:anywhere;}
.cell-user{min-width:0;}
.cell-user > span:last-child{min-width:0;}
.cell-user .name{overflow-wrap:anywhere;}
.badge{flex:none;}
.avatar{flex:none;}

/* ---- Intermediate breakpoint: 3-up grids were staying 3-up until 760px,
   which is far too tight on a tablet.
   NOTE the min-width bound. This block sits after the 520px rule, so an
   unbounded max-width:1024 would also match at 360px and win the cascade,
   forcing two 154px columns onto a phone. ---- */
@media (min-width:521px) and (max-width:1024px){
  .g-3{grid-template-columns:repeat(2,1fr);}
}