/* Phase 58 - Modern Typography, Color System & Design Language
   Applies readable, high-contrast, consistent typography across customer and admin UI. */
:root{
  --sk-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sk-text:#111827;
  --sk-text-soft:#374151;
  --sk-text-muted:#FFFFFF;
  --sk-text-on-dark:#ffffff;
  --sk-bg:#f7fafc;
  --sk-surface:#ffffff;
  --sk-surface-soft:#f8fafc;
  --sk-border:#dbe6ef;
  --sk-brand:#0f766e;
  --sk-brand-strong:#0b5f66;
  --sk-accent:#0ac5d5;
  --sk-board:#4c2ddf;
  --sk-warning:#b45309;
  --sk-danger:#b91c1c;
  --sk-success:#166534;
  --sk-info:#1d4ed8;
  --sk-radius:18px;
  --sk-radius-sm:12px;
  --sk-shadow:0 10px 28px rgba(15,23,42,.08);
  --sk-shadow-soft:0 6px 18px rgba(15,23,42,.06);
}

html{font-size:16px;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;}
body,button,input,select,textarea,table,.btn,.button,.card,.menu-card,.dish-card,.admin-card,.dashboard-card{
  font-family:var(--sk-font) !important;
}
body{
  color:var(--sk-text) !important;
  background:var(--sk-bg);
  line-height:1.55;
  font-weight:400;
}

/* Balanced heading scale: visible but not oversized */
h1,.page-title,.admin-page-title,.section-title{
  color:var(--sk-text) !important;
  font-size:clamp(1.55rem,2.2vw,2.15rem) !important;
  line-height:1.18 !important;
  font-weight:650 !important;
  letter-spacing:-.025em;
  margin:0 0 .65rem;
}
h2,.section-heading,.module-title,.card-section-title{
  color:var(--sk-text) !important;
  font-size:clamp(1.28rem,1.7vw,1.65rem) !important;
  line-height:1.25 !important;
  font-weight:600 !important;
  letter-spacing:-.018em;
  margin:1.1rem 0 .7rem;
}
h3,.card-title,.widget-title,.dish-title,.dish-name,.product-title,.menu-card h3,.dish-card h3{
  color:var(--sk-text) !important;
  font-size:clamp(1.03rem,1.25vw,1.22rem) !important;
  line-height:1.3 !important;
  font-weight:580 !important;
  letter-spacing:-.01em;
  margin:.15rem 0 .38rem;
}
h4,h5,h6,.small-title,.form-title{
  color:var(--sk-text) !important;
  font-weight:560 !important;
  line-height:1.35 !important;
}
p,.description,.desc,.help-text,.muted,.text-muted,small,.supporting-text,.card p,.menu-card p,.dish-card p{
  line-height:1.58 !important;
  font-weight:400 !important;
}
p,.card p,.menu-card p,.dish-card p,.table,.table td,td,th,li{
  color:var(--sk-text-soft) !important;
}
.text-muted,.muted,.supporting-text,small,.help-text,.form-hint,.subtitle,.page-subtitle,.section-subtitle{
  color:var(--sk-text-muted) !important;
}
strong,b{font-weight:620;}

/* Cards, widgets, sections */
.card,.admin-card,.dashboard-card,.widget,.panel,.box,.form-card,.content-card,.receipt-card,.report-card,.analytics-card,
.category-card,.dish-card,.product-card,.menu-card{
  border-radius:var(--sk-radius) !important;
  border:1px solid var(--sk-border) !important;
  box-shadow:var(--sk-shadow-soft) !important;
}
.card,.admin-card,.dashboard-card,.widget,.panel,.box,.form-card,.content-card,.receipt-card,.report-card,.analytics-card{
  background:var(--sk-surface) !important;
  color:var(--sk-text) !important;
}
.section,.admin-section,.customer-section{margin-bottom:1.25rem;}

/* Ensure text never camouflages in colored menu cards */
.menu-card,.dish-card,.product-card,.customer-widget-card{
  color:var(--sk-text) !important;
}
.menu-card[style*="background"],.dish-card[style*="background"],.product-card[style*="background"],
.menu-card.phase54-card,.digital-menu-board .menu-card,.interactive-menu-board .menu-card{
  color:#073238 !important;
}
.menu-card[style*="background"] h1,.menu-card[style*="background"] h2,.menu-card[style*="background"] h3,
.dish-card[style*="background"] h1,.dish-card[style*="background"] h2,.dish-card[style*="background"] h3,
.digital-menu-board .menu-card h1,.digital-menu-board .menu-card h2,.digital-menu-board .menu-card h3,
.interactive-menu-board .menu-card h1,.interactive-menu-board .menu-card h2,.interactive-menu-board .menu-card h3{
  color:#062c33 !important;
}
.menu-card[style*="background"] p,.dish-card[style*="background"] p,.product-card[style*="background"] p,
.digital-menu-board .menu-card p,.interactive-menu-board .menu-card p{
  color:#164e55 !important;
}
.price,.dish-price,.product-price,.menu-price{
  color:#ffffff !important;
  font-weight:650 !important;
  text-shadow:0 1px 1px rgba(0,0,0,.16);
}

/* Dark and violet board sections */
.digital-menu-board,.kitchen-digital-menu-board,.menu-board-hero,.phase54-board,
[data-theme="dark"],.dark-panel,.dark-card{
  color:var(--sk-text-on-dark) !important;
}
.digital-menu-board h1,.digital-menu-board h2,.digital-menu-board h3,
.kitchen-digital-menu-board h1,.kitchen-digital-menu-board h2,.kitchen-digital-menu-board h3,
.menu-board-hero h1,.menu-board-hero h2,.menu-board-hero h3,.phase54-board h1,.phase54-board h2,.phase54-board h3,
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,.dark-panel h1,.dark-panel h2,.dark-panel h3{
  color:#ffffff !important;
}
.digital-menu-board p,.kitchen-digital-menu-board p,.menu-board-hero p,.phase54-board p,
[data-theme="dark"] p,.dark-panel p,.dark-card p{
  color:#eef2ff !important;
}

/* Forms */
label,.form-label,.control-label{
  color:var(--sk-text) !important;
  font-weight:560 !important;
  font-size:.94rem !important;
  margin-bottom:.35rem;
}
input,select,textarea,.form-control,.input,.select{
  color:var(--sk-text) !important;
  background:#ffffff !important;
  border:1px solid var(--sk-border) !important;
  border-radius:var(--sk-radius-sm) !important;
  min-height:44px;
  font-size:1rem !important;
  line-height:1.4 !important;
  box-shadow:none !important;
}
input::placeholder,textarea::placeholder{color:#6b7280 !important;opacity:1;}
input:focus,select:focus,textarea:focus,.form-control:focus{
  outline:3px solid rgba(10,197,213,.20) !important;
  border-color:var(--sk-accent) !important;
}

/* Buttons */
button,.btn,.button,a.btn,.primary-btn,.secondary-btn,.action-btn,.add-to-cart,.checkout-btn{
  font-weight:560 !important;
  letter-spacing:0 !important;
  border-radius:14px !important;
  min-height:42px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
button:hover,.btn:hover,.button:hover,a.btn:hover,.primary-btn:hover,.secondary-btn:hover,.action-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--sk-shadow-soft);
}
.btn-primary,.primary-btn,.checkout-btn,.save-btn,.btn.save,.btn-success{
  background:var(--sk-brand) !important;
  color:#ffffff !important;
  border-color:var(--sk-brand) !important;
}
.btn-secondary,.secondary-btn{
  background:#ffffff !important;
  color:var(--sk-brand-strong) !important;
  border-color:var(--sk-border) !important;
}
a{color:var(--sk-brand-strong);text-decoration-thickness:.08em;text-underline-offset:3px;}
a:hover{color:var(--sk-brand);}

/* Tables */
table{border-collapse:separate;border-spacing:0;width:100%;}
th{
  color:var(--sk-text) !important;
  font-weight:600 !important;
  background:#f8fafc !important;
}
td,th{padding:.82rem .9rem;border-bottom:1px solid #e5edf4;vertical-align:middle;}
tr:hover td{background:#fbfdff;}

/* Badges and status colors */
.badge,.status,.status-badge,.pill{
  border-radius:999px !important;
  font-weight:580 !important;
  padding:.35rem .7rem !important;
}
.badge-success,.status-success,.available,.delivered{background:#dcfce7 !important;color:var(--sk-success) !important;}
.badge-warning,.status-warning,.pending{background:#fef3c7 !important;color:var(--sk-warning) !important;}
.badge-danger,.status-danger,.error,.sold-out{background:#fee2e2 !important;color:var(--sk-danger) !important;}
.badge-info,.status-info,.processing{background:#dbeafe !important;color:var(--sk-info) !important;}

/* Header/navigation readability */
header,.site-header,.customer-header,.admin-header,.topbar,.navbar{
  color:var(--sk-text) !important;
}
.navbar a,.site-header a,.customer-header a,.admin-header a,.topbar a{
  color:var(--sk-text) !important;
  font-weight:560 !important;
}
.dropdown-menu,.side-drawer,.mobile-menu,.desktop-menu-dropdown{
  background:#ffffff !important;
  color:var(--sk-text) !important;
  border:1px solid var(--sk-border) !important;
  box-shadow:var(--sk-shadow) !important;
}
.dropdown-menu a,.side-drawer a,.mobile-menu a,.desktop-menu-dropdown a{color:var(--sk-text) !important;}
.dropdown-menu a:hover,.side-drawer a:hover,.mobile-menu a:hover,.desktop-menu-dropdown a:hover{background:#f1f5f9 !important;color:var(--sk-brand-strong) !important;}

/* Mobile refinements */
@media (max-width: 768px){
  html{font-size:15.5px;}
  h1,.page-title,.admin-page-title,.section-title{font-size:1.5rem !important;}
  h2,.section-heading,.module-title{font-size:1.25rem !important;}
  h3,.card-title,.dish-title,.dish-name,.product-title,.menu-card h3,.dish-card h3{font-size:1.06rem !important;}
  p,.card p,.menu-card p,.dish-card p,td,th,li{font-size:.96rem !important;}
  .card,.admin-card,.dashboard-card,.widget,.panel,.box,.form-card,.content-card,.receipt-card,.report-card,.analytics-card,
  .category-card,.dish-card,.product-card,.menu-card{border-radius:16px !important;}
  input,select,textarea,.form-control,button,.btn,.button{font-size:1rem !important;}
}

/* Print clarity */
@media print{
  body{background:#ffffff !important;color:#000000 !important;font-family:Arial,sans-serif !important;}
  h1,h2,h3,p,td,th,small,label{color:#000000 !important;text-shadow:none !important;}
  .card,.receipt-card,.report-card{box-shadow:none !important;border:1px solid #cccccc !important;}
}