/* Signature Nails | Welcome Master Design System
   2026-10-14. The approved Welcome page is deliberately excluded.
   Final visual layer shared by public salon, guest, owner, team and customer routes.
   No text content, booking rules, authentication logic or database dependencies. */

/* 1. Official material and color tokens. All non-welcome routes inherit them. */
body:not(.welcome-mode),
body:not(.welcome-mode) .overlay.open {
  --sn-material-marble:#fff8f1;
  --sn-material-blush:#f9e5df;
  --sn-material-rose:#bc7a85;
  --sn-material-gold:#c88964;
  --sn-material-gold-light:#f5d6b6;
  --sn-material-wine:#750f35;
  --sn-material-dark-wine:#4c0827;
  --sn-material-ink:#512639;
  --sn-material-muted:#73515c;
  --sn-material-border:#c99478;
  --sn-material-glass:linear-gradient(155deg,#fffcf8f8 1%,#fff0ecf8 56%,#f4d5ccf4 100%);
  --sn-material-button:linear-gradient(180deg,#fffdfb 0%,#fff1ee 48%,#f4cec8 100%);
  --sn-material-button-primary:linear-gradient(180deg,#b33c68 0%,#870e40 39%,#570725 78%,#8c1748 100%);
  --sn-material-relief:inset 0 2px 3px #fffdfa,inset 0 -3px 5px #a8695c44,0 3px 0 #ad6c53,0 8px 19px #6b254636;
  --sn-material-depth:0 16px 38px #71364a24,0 3px 10px #d3947755;
  --ink:var(--sn-material-ink);
  --muted:var(--sn-material-muted);
  --line:#dbb6a1;
  --rose-dark:var(--sn-material-wine);
  --rose:var(--sn-material-rose);
  --surface:var(--sn-material-marble);
  --soft:var(--sn-material-blush);
  color:var(--sn-material-ink);
}

/* 2. Continuous marble and candlelit rose-gold atmosphere.
   Decorative photos remain in the margins, not behind editable information. */
body:not(.welcome-mode) #site-shell,
body:not(.welcome-mode) .overlay.open .dialog {
  background-color:#fff7f0!important;
  background-image:
    radial-gradient(ellipse at 94% 12%,#ffd0d83a 0%,transparent 38%),
    radial-gradient(ellipse at 0% 71%,#eab2b32e 0%,transparent 45%),
    linear-gradient(114deg,transparent 0 27%,#c8866125 27.15%,#fffefa33 27.4%,transparent 27.9%),
    linear-gradient(148deg,transparent 0 71%,#bd8c6c1c 71.2%,#fffefa66 71.5%,transparent 72%),
    repeating-linear-gradient(120deg,transparent 0 160px,#c99a7b0b 163px,transparent 167px 302px),
    linear-gradient(140deg,#fffdf9 0%,#f9e7df 51%,#fff7f0 100%)!important;
  background-attachment:scroll!important;
}
body:not(.welcome-mode) #site-shell::before{
  opacity:.40!important;
}
body:not(.welcome-mode) #site-shell::after{
  opacity:.30!important;
}
body:not(.welcome-mode) .overlay.open{
  background-color:#d9b2ad!important;
  background-image:
    linear-gradient(130deg,#3b112c7d,#5d213e8e),
    radial-gradient(ellipse at 15% 5%,#fff7edd1,transparent 54%),
    radial-gradient(ellipse at 87% 86%,#f4b3c1b8,transparent 55%),
    linear-gradient(137deg,#f8e1d6,#eac4bb)!important;
}
body:not(.welcome-mode) .overlay.open .dialog {
  border:2px solid var(--sn-material-border)!important;
  box-shadow:inset 0 0 0 3px #fffbf4,0 20px 64px #48182e68!important;
}
body:not(.welcome-mode) .overlay.open .dialog::before{
  background:linear-gradient(90deg,#ffead2,#ac5879 49%,#f4ca9e)!important;
  box-shadow:0 1px 4px #a24d5d55;
}
body:not(.welcome-mode) .overlay.open .dialog::after{
  opacity:.18!important;
}

/* 3. True glass components. Decorative surfaces never replace real DOM text. */
body:not(.welcome-mode) :is(
  #site-shell .service-tile,
  #site-shell .hero-art,
  #site-shell .site-header,
  #site-shell .site-footer,
  .overlay.open .dialog .ui-card,
  .overlay.open .dialog .ui-stat,
  .overlay.open .dialog .ui-row,
  .overlay.open .dialog .ops-section,
  .overlay.open .dialog .ops-request,
  .overlay.open .dialog .ops-appointment,
  .overlay.open .dialog .actionable-record,
  .overlay.open .dialog .actionable-detail,
  .overlay.open .dialog .actionable-change,
  .overlay.open .dialog .actionable-info,
  .overlay.open .dialog .signature-shortcut,
  .overlay.open .dialog .readiness-item,
  .overlay.open .dialog .demo-check-item,
  .overlay.open .dialog .booking-summary,
  .overlay.open .dialog .booking-price,
  .overlay.open .dialog .sn-collection,
  .overlay.open .dialog .sn-unassigned-services,
  .overlay.open .dialog .sn-collection-service
){
  border-color:var(--sn-material-border)!important;
  background-color:#fffaf5!important;
  background-image:var(--sn-material-glass)!important;
  color:var(--sn-material-ink);
  box-shadow:inset 0 2px 0 #ffffffd9,0 6px 18px #87495e21!important;
}
/* Keep dense business tables calmer and more opaque than marketing cards. */
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-row,.ops-appointment,.ops-request,.actionable-record,.calendar-cell,
  .calendar-day,.calendar-day-head,.calendar-time,.calendar-lane,
  .actionable-detail,.signature-customer-grid article
){
  background-color:#fffcf8!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-error,.ui-success,.ui-chip.confirmed,.ui-chip.cancelled,.ui-chip.requested
){
  background-image:none!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-card,.ui-stat,.ops-section,.ops-request,.ops-appointment,
  .actionable-record,.signature-shortcut,.sn-collection
){
  min-width:0;
  border-radius:clamp(16px,2vw,24px)!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(.ops-action-panel,.note,.ui-modal-section){
  border-radius:15px;
  border-color:#d5b19d;
}

/* 4. One typography hierarchy across welcome-adjacent and deep app pages. */
body:not(.welcome-mode) :is(
  #site-shell h1,#site-shell h2,
  .overlay.open .dialog h2,
  .overlay.open .dialog .ui-card h3,
  .overlay.open .dialog .ops-section h3,
  .overlay.open .dialog .sn-collection h3
){
  color:var(--sn-material-wine)!important;
  text-shadow:0 1px 0 #fffdf9;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.018em;
  text-wrap:balance;
}
body:not(.welcome-mode) #site-shell .section-heading h2,
body:not(.welcome-mode) .overlay.open .dialog h2{
  line-height:1.17!important;
  margin-top:0;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-muted,.ops-request p,.ops-appointment p,.signature-shortcut span,
  .sn-collection p,.sn-collection-service p
){
  color:var(--sn-material-muted);
}
body:not(.welcome-mode) :is(
  #site-shell .section-kicker,
  #site-shell .hero-eyebrow,
  .overlay.open .dialog .eyebrow,
  .overlay.open .dialog .section-kicker,
  .overlay.open .dialog .demo-eyebrow
){
  color:#924362!important;
  letter-spacing:.13em;
  font-weight:800;
}

/* 5. Unified raised burgundy / rose-gold controls across route-specific modules. */
body:not(.welcome-mode) :is(
  #site-shell .site-button,
  #site-shell .site-nav button,
  .overlay.open .dialog button.primary,
  .overlay.open .dialog .site-button,
  .overlay.open .dialog .ops-tabs button,
  .overlay.open .dialog .demo-role-tabs button,
  .overlay.open .dialog .actionable-filterbar button,
  .overlay.open .dialog .actionable-link,
  .overlay.open .dialog .booking-actions button,
  .overlay.open .dialog .ui-actions button,
  .overlay.open .dialog .ui-toolbar button,
  .overlay.open .dialog .sn-collection-service button,
  #signature-app-navigation button
){
  box-sizing:border-box;
  min-height:44px;
  max-width:100%;
  border:1.5px solid var(--sn-material-border)!important;
  border-radius:999px!important;
  background:var(--sn-material-button)!important;
  color:var(--sn-material-wine)!important;
  box-shadow:var(--sn-material-relief)!important;
  text-shadow:0 1px 0 #fff8f5;
  text-decoration:none;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
  -webkit-tap-highlight-color:transparent;
}
body:not(.welcome-mode) :is(
  #site-shell .primary-action,
  #site-shell .nav-accent,
  .overlay.open .dialog button.primary,
  .overlay.open .dialog .primary-action,
  .overlay.open .dialog .ops-tabs button.active,
  .overlay.open .dialog .demo-role-tabs button.is-selected,
  .overlay.open .dialog .actionable-filterbar button.selected,
  #signature-app-navigation .signature-nav-tabs button.active,
  #signature-app-navigation .signature-nav-tabs button[aria-current="page"]
){
  background:var(--sn-material-button-primary)!important;
  color:#fffafa!important;
  border-color:#d7a681!important;
  box-shadow:inset 0 2px 5px #fff5e74d,inset 0 -4px 6px #3d031c70,0 3px 0 #7b463a,0 9px 18px #5b173b58!important;
  text-shadow:0 1px 2px #3b031b!important;
}
body:not(.welcome-mode) :is(
  #site-shell button,
  .overlay.open button,
  #signature-app-navigation button
):focus-visible{
  outline:3px solid #76123f!important;
  outline-offset:3px!important;
}
body:not(.welcome-mode) :is(
  #site-shell button,.overlay.open button,#signature-app-navigation button
):disabled{
  opacity:.58!important;
  cursor:not-allowed!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .close,.back
){
  color:var(--sn-material-wine)!important;
  background:var(--sn-material-button)!important;
  box-shadow:inset 0 2px 4px #fff,0 3px 7px #74324730!important;
}

/* 6. Consistent forms, collection tiers, calendars, gallery and contact details. */
body:not(.welcome-mode) .overlay.open .dialog :is(
  input:not([type=checkbox]):not([type=radio]),
  textarea,select
){
  min-height:44px;
  max-width:100%;
  background:#fffcf9!important;
  border:1.5px solid #c39782!important;
  color:var(--sn-material-ink)!important;
  border-radius:13px!important;
  box-shadow:inset 0 2px 4px #a56c6921!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(input,textarea,select):focus-visible{
  outline:3px solid #8a2350!important;
  outline-offset:1px!important;
}
body:not(.welcome-mode) .overlay.open .dialog :is(label,.field){
  color:var(--sn-material-ink);
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collections{
  align-items:stretch;
  gap:clamp(12px,2vw,20px);
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collection--essential{
  border-color:#c99779!important;
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collection--signature{
  border-color:#b55e83!important;
  box-shadow:inset 0 2px 0 #fff,0 9px 20px #ad5e7d37!important;
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collection--luxury{
  border-color:#a8476e!important;
  box-shadow:inset 0 2px 0 #fff,0 10px 25px #72244038!important;
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collection summary{
  color:var(--sn-material-wine)!important;
  border-radius:12px;
}
body:not(.welcome-mode) .overlay.open .dialog .sn-collection summary:focus-visible{
  outline:3px solid #81264d;
  outline-offset:2px;
}
body:not(.welcome-mode) .overlay.open .dialog :is(.calendar-day,.calendar-week,.calendar-month){
  scrollbar-color:#b7818b #f9e5df;
  scrollbar-width:thin;
}
body:not(.welcome-mode) .overlay.open .dialog :is(.calendar-entry,.calendar-block){
  border-radius:10px;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .gallery-grid img,.gallery img,.service-tile img
){
  border:2px solid #c58d70;
  box-shadow:0 3px 10px #6626442a;
  border-radius:18px;
  object-fit:cover;
}
/* 7. Responsive content containment: horizontal scrolling belongs only to data grids. */
body:not(.welcome-mode) .overlay.open .dialog :is(
  #content,.ui-grid,.ui-stats,.signature-customer-grid,.sn-collections,.ops-agenda
){
  min-width:0;max-width:100%;
}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-grid>*,.ui-stats>*,.signature-customer-grid>*,
  .sn-collections>*,.ops-agenda>*
){min-width:0;}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .calendar-month,.calendar-week,.calendar-day,
  .ui-table-wrap,.table-scroll
){max-width:100%;overflow-x:auto;}
body:not(.welcome-mode) .overlay.open .dialog :is(
  .ui-grid,.ui-stats,.sn-collections
){overflow-wrap:anywhere;}
@media(max-width:600px){
  body:not(.welcome-mode) #site-shell::before{opacity:.27!important}
  body:not(.welcome-mode) #site-shell::after{opacity:.20!important}
  body:not(.welcome-mode) .overlay.open .dialog::after{
    opacity:.14!important;
  }
  body:not(.welcome-mode) .overlay.open .dialog{
    border-left:0!important;border-right:0!important;border-radius:0!important;
    box-shadow:inset 0 2px 0 #fffaf4!important;
  }
  body:not(.welcome-mode) .overlay.open .dialog h2{
    font-size:clamp(27px,7.2vw,37px)!important;
  }
  body:not(.welcome-mode) .overlay.open .dialog :is(
    .ui-card,.ops-request,.ops-appointment,.actionable-record,
    .sn-collection,.sn-unassigned-services
  ){
    padding:clamp(12px,3.5vw,17px)!important;
  }
  body:not(.welcome-mode) .overlay.open .dialog .sn-collections{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body:not(.welcome-mode) .overlay.open .dialog button{
    min-height:44px;
  }
}
@media(prefers-reduced-motion:reduce){
  body:not(.welcome-mode) :is(
    #site-shell button,.overlay.open button,.sn-collection,.service-tile
  ){transition:none!important;animation:none!important;}
}
@media(prefers-contrast:more){
  body:not(.welcome-mode) .overlay.open .dialog::after{display:none!important}
  body:not(.welcome-mode) .overlay.open .dialog :is(.ui-card,.ui-stat,.sn-collection){
    background:#fffdfb!important;
    border-color:#773d4a!important;
  }
}