/* ═══════════════════════════════════════════
   BASE.CSS — Variables, Reset, Typography
   Sumo Markthal PWA — Core Foundation
   ═══════════════════════════════════════════ */

/* ─── FALLBACK THEME VARIABLES ──────────── */
/* These provide defaults if theme CSS fails to load */
:root {
  --bg:             #faf4f0;
  --bg-card:        #ffffff;
  --bg-input:       #f5eeea;
  --bg-header:      rgba(250,244,240,0.92);
  --bg-nav:         rgba(250,244,240,0.94);
  --bg-toast:       #ffffff;
  --bg-overlay:     rgba(250,244,240,0.85);
  --bg-hover:       #f0e8e3;
  --border:         rgba(196,69,105,0.12);
  --border-focus:   rgba(196,69,105,0.35);
  --shadow:         0 2px 12px rgba(120,60,80,0.08);
  --shadow-lg:      0 8px 32px rgba(120,60,80,0.12);
  --text:           #2d2d2d;
  --text-muted:     #7a6b6b;
  --text-dim:       #b0a0a0;
  --text-on-accent: #ffffff;
  --primary:        #c44569;
  --primary-soft:   rgba(196,69,105,0.1);
  --primary-glow:   rgba(196,69,105,0.25);
  --accent-green:   #2d9e5e;
  --accent-red:     #d94452;
  --greeting-from:  #fce4ec;
  --greeting-to:    #f8bbd0;
  --greeting-text:  #2d2d2d;
  --greeting-info:  #7a6b6b;
  --greeting-span:  #c44569;
  --avatar-from:    #c44569;
  --avatar-to:      #e8849a;
  --tile-blue:      rgba(59,130,246,0.08);
  --tile-blue-bdr:  rgba(59,130,246,0.25);
  --tile-green:     rgba(46,160,94,0.08);
  --tile-green-bdr: rgba(46,160,94,0.25);
  --tile-purple:    rgba(148,75,217,0.08);
  --tile-purple-bdr:rgba(148,75,217,0.25);
  --tile-orange:    rgba(221,126,40,0.08);
  --tile-orange-bdr:rgba(221,126,40,0.25);
  --tile-red:       rgba(217,68,82,0.08);
  --tile-red-bdr:   rgba(217,68,82,0.25);
  --tile-cyan:      rgba(18,170,190,0.08);
  --tile-cyan-bdr:  rgba(18,170,190,0.25);
  --tile-yellow:    rgba(200,165,20,0.08);
  --tile-yellow-bdr:rgba(200,165,20,0.25);
  --tile-pink:      rgba(219,112,147,0.08);
  --tile-pink-bdr:  rgba(219,112,147,0.25);
  --icon-blue:      #3b7cf5;
  --icon-green:     #2d9e5e;
  --icon-purple:    #9444d9;
  --icon-orange:    #dd7e28;
  --icon-red:       #d94452;
  --icon-cyan:      #12aabe;
  --icon-yellow:    #c8a514;
  --scrollbar:      #d4c4c4;
  --toggle-off:     #d5c8c8;
  --upload-dash:    rgba(196,69,105,0.2);
  --chat-bot-bg:    #fff0f3;
  --chat-bot-bdr:   rgba(196,69,105,0.15);
  --calc-highlight: #2d9e5e;
  --select-arrow:   %23777;
  --scheme:         light;
}

/* ─── SHARED RADIUS / SPACING ───────────── */
:root {
  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ─── THEME TRANSITION ──────────────────── */
.theme-transitioning,
.theme-transitioning * {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important;
}

/* ─── THEME SWATCH LOADING STATE ────────── */
.theme-swatch.loading {
  pointer-events: none;
  opacity: 0.6;
}

.theme-swatch.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.3);
  border-radius: inherit;
  animation: shimmer 1s infinite;
}

@keyframes shimmer {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}

/* ─── BASE RESET ────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.35s ease, color 0.35s ease;
  color-scheme: var(--scheme);
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── UTILITY CLASSES ───────────────────── */

.hidden { display: none !important; }

/* ─── SCROLLBAR ─────────────────────────── */

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }