/* Canonical KingSystem foundations. Tenant identity colors are deliberately not assigned here. */
:root {
  --ks-font-body: Inter, "Segoe UI", system-ui, sans-serif;
  --ks-font-display: "Plus Jakarta Sans", Inter, "Segoe UI", system-ui, sans-serif;
  --ks-space-1: .25rem;
  --ks-space-2: .5rem;
  --ks-space-3: .75rem;
  --ks-space-4: 1rem;
  --ks-space-5: 1.25rem;
  --ks-space-6: 1.5rem;
  --ks-space-8: 2rem;
  --ks-radius-control: .5rem;
  --ks-radius-card: .875rem;
  --ks-radius-dialog: 1.125rem;
  --ks-control-size: 2.5rem;
  --ks-control-compact: 2.25rem;
  --ks-focus-width: 3px;
  --ks-focus-offset: 3px;
  --ks-motion-fast: 150ms;
  --ks-light-bg: 220 20% 97%;
  --ks-light-surface: 0 0% 100%;
  --ks-light-surface-2: 220 18% 95%;
  --ks-light-fg: 228 22% 12%;
  --ks-light-muted: 222 10% 42%;
  --ks-light-line: 222 16% 85%;
  --ks-light-primary: 226 64% 44%;
  --ks-dark-bg: 230 18% 8%;
  --ks-dark-surface: 228 16% 12%;
  --ks-dark-surface-2: 228 14% 16%;
  --ks-dark-fg: 220 20% 94%;
  --ks-dark-muted: 222 10% 70%;
  --ks-dark-line: 228 12% 28%;
  --ks-dark-primary: 226 80% 70%;
  --ks-light-ok: 145 55% 28%;
  --ks-light-warn: 28 85% 30%;
  --ks-light-danger: 0 68% 43%;
  --ks-light-info: 200 80% 30%;
  --ks-dark-ok: 145 60% 65%;
  --ks-dark-warn: 38 95% 70%;
  --ks-dark-danger: 0 80% 76%;
  --ks-dark-info: 200 85% 73%;
}
@media (pointer: coarse) {
  :root { --ks-control-size: 2.75rem; --ks-control-compact: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --ks-motion-fast: 0ms; }
}

/* KingSystem: shared spacing, focus and touch targets; salon colors remain configurable. */
:root{--font-body:Inter,"Segoe UI",sans-serif;--font-display:"Plus Jakarta Sans",Inter,"Segoe UI",sans-serif}
body{font-size:14px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent,var(--brand,#a67c25));outline-offset:3px}
button,.btn,.cta,.wa,.slot,.chip{min-height:44px}
.card,.summary>div,.appt,.login{border:1px solid var(--line);box-shadow:0 3px 14px #20152205;border-radius:14px}
.summary b{font-size:1.65rem;letter-spacing:-.04em}
.summary span{font-size:12px}
.wrap{gap:24px}
.top h1{font-size:clamp(24px,3vw,32px);letter-spacing:-.04em}
.side .brandname{font-size:20px;line-height:1.3;letter-spacing:-.04em}
.side .tab{border-radius:8px;line-height:1.4;min-height:44px;box-sizing:border-box}
.section-head h2{font-size:18px;letter-spacing:-.025em}
.next-appointment{padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.next-appointment .next-content{flex:1;min-width:200px}
.next-appointment small{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:5px}
.next-appointment strong{font-size:16px;display:block}
.next-appointment p{margin:4px 0 0;color:var(--muted);font-size:13px}
.public-tools{display:flex;gap:8px;flex-wrap:wrap}
.hero{padding-top:32px}
.hero .inner{max-width:760px}
.hero .arch{width:100%;max-width:760px;aspect-ratio:2.4;margin:0 auto;border:0;border-radius:22px;padding:0;background:var(--soft)}
.hero .mirror{border-radius:22px}
.hero .logo{width:76px;height:76px;bottom:-30px;border:4px solid var(--surface);box-shadow:0 4px 16px #20152218;border-radius:22px}
.hero h1{font-size:clamp(28px,5vw,40px);letter-spacing:-.05em;line-height:1.14;margin-top:48px}
.hero p{font-size:13px;line-height:1.5}
main>.inner{max-width:760px}
.home{gap:28px}.home .about{font-family:var(--font-body);font-size:15px;line-height:1.7;color:var(--muted);max-width:600px;align-self:center}
.home .ctas{max-width:560px;width:100%;align-self:center;gap:12px}
.cta,.wa,.cart,.cart button{border-radius:12px}
.sec-title,.step h2{font-size:21px;letter-spacing:-.035em;line-height:1.3}
.card{padding:22px}.sec-title{text-align:left;margin-bottom:16px}.cat{text-align:left;font-weight:700;font-size:12px;letter-spacing:.03em;margin-top:20px}
.menu .item{padding:14px 0;border-bottom:1px solid var(--line);gap:16px;align-items:center}.item .dots{border:0}.menu .item:last-child{border-bottom:0}
.gallery{gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}.gallery button,.gallery button:first-child{border-radius:14px;grid-column:auto;grid-row:auto}.gallery button:first-child{grid-column:span 2;grid-row:span 2}
.step{padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.step[aria-disabled="true"]{opacity:.5}
.step .hint{line-height:1.6;margin-top:0}
.slots .slot{border-radius:10px;font-variant-numeric:tabular-nums}
.home .team{gap:16px}.info>div+div{border-top:1px solid var(--line)}
@media(min-width:960px){.shell.in-app{grid-template-columns:244px 1fr}.shell.in-app .side{background:#17191f;color:#e7e9ee;padding:26px 14px}.shell.in-app .side .tab{color:#aeb4bf;font-size:13px}.shell.in-app .side .tab[aria-selected="true"]{background:#ffffff12;color:#fff}.shell.in-app .wrap{padding:28px 36px;max-width:1280px;width:100%}.shell.in-app .side .btn{color:#e7e9ee;border-color:#ffffff30}}
@media(max-width:600px){.hero{padding-top:16px}.hero .arch{aspect-ratio:1.8;border-radius:16px}.hero .mirror{border-radius:16px}.hero .logo{width:68px;height:68px}.hero h1{margin-top:44px}.card,.step{padding:16px}.home .ctas{flex-direction:column}.gallery{gap:7px}.daybar .nav{flex-wrap:wrap}.appt .ops{gap:6px}.appt .ops button{flex:1 1 auto}.next-appointment{padding:16px}.public-tools{width:100%}.public-tools>*{flex:1 1 auto;text-align:center}.side .tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}.side .tab{white-space:nowrap}.wrap{padding-bottom:calc(32px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Structure is shared; salon branding variables remain owned by the tenant. */
:root{--font-body:var(--ks-font-body);--font-display:var(--ks-font-display)}
button,input,select,textarea{font:inherit}
button,.btn,.cta,.wa,.slot,.chip{min-height:var(--ks-control-size);box-sizing:border-box}
.card,.step,.summary>div,.appt,.login{border-radius:var(--ks-radius-card)}
button:disabled,.btn[aria-disabled=true]{cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-width:var(--ks-focus-width);outline-offset:var(--ks-focus-offset)}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--danger,#b42318)}
@media(pointer:coarse){button,.btn,.cta,.wa,.slot,.chip,input:not([type=checkbox]):not([type=radio]):not([type=color]),select{min-height:44px}}
@media(max-width:600px){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}.card,.step{min-width:0}.daybar,.public-tools{min-width:0}.slot{min-width:44px}}
@media(forced-colors:active){button,.btn,.slot,.chip{border:1px solid ButtonText}button:focus-visible,a:focus-visible{outline:3px solid Highlight}}