/* ═════ SondarIQ Design Tokens ═════
 * Single source of truth for all visual properties.
 * Dark theme by default, light theme via prefers-color-scheme.
 */

/* ── Dark theme (default) ── */
:root {
  /* Semantic colors */
  --color-bg: #0A0F1C;
  --color-surface: #111827;
  --color-border: #1E293B;
  --color-text: #F1F5F9;
  --color-muted: #9CA3AF;
  --color-primary: #4D8DFF;
  --color-primary-soft: rgba(77,141,255,.12);
  --color-success: #22FF88;
  --color-success-soft: rgba(34,255,136,.12);
  --color-success-glow: 0 0 20px rgba(34,255,136,.3);
  --color-danger: #FF3B5C;
  --color-danger-soft: rgba(255,59,92,.12);
  --color-warning: #F59E0B;
  --color-warning-soft: rgba(245,158,11,.12);

  /* Legacy aliases — keep existing code working */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --border: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --brand: var(--color-primary);
  --brand-soft: var(--color-primary-soft);
  --green: var(--color-success);
  --green-soft: var(--color-success-soft);
  --green-glow: var(--color-success-glow);
  --red: var(--color-danger);
  --red-soft: var(--color-danger-soft);
  --gold: var(--color-warning);
  --gold-soft: var(--color-warning-soft);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "JetBrains Mono", monospace;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --line-height-body: 1.5;
  --line-height-heading: 1.2;

  /* Spacing — 4px grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Safe areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Light theme ── */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-border: #E2E8F0;
    --color-text: #0F172A;
    --color-muted: #64748B;
    --color-primary: #2563EB;
    --color-primary-soft: rgba(37,99,235,.08);
    --color-success: #059669;
    --color-success-soft: rgba(5,150,105,.08);
    --color-success-glow: 0 0 16px rgba(5,150,105,.15);
    --color-danger: #DC2626;
    --color-danger-soft: rgba(220,38,38,.08);
    --color-warning: #D97706;
    --color-warning-soft: rgba(217,119,6,.08);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  }
}

/* ── Base reset ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── Focus styles ── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Progress Bars ── */
.progress {
  height: 8px;
  background: var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.progress-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
/* Shine effect */
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: progressShine 2s ease-in-out infinite;
}
@keyframes progressShine {
  0% { left: -60%; }
  100% { left: 120%; }
}
/* Striped warning */
.progress-bar.striped {
  background-image: linear-gradient(45deg,
    rgba(255,255,255,0.15) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.15) 75%, transparent 75%);
  background-size: 16px 16px;
  animation: progressStripes 0.8s linear infinite;
}
@keyframes progressStripes {
  0% { background-position: 0 0; }
  100% { background-position: 16px 0; }
}
/* Pulse for critical */
.progress-bar.pulse {
  animation: progressPulse 1.5s ease-in-out infinite;
}
@keyframes progressPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/* Colors */
.progress-green  { background: linear-gradient(90deg, #22c55e, #22FF88); }
.progress-yellow { background: linear-gradient(90deg, #ca8a04, #F59E0B); }
.progress-orange { background: linear-gradient(90deg, #ea580c, #F97316); }
.progress-red    { background: linear-gradient(90deg, #dc2626, #FF3B5C); }
.progress-blue   { background: linear-gradient(90deg, #2563eb, #4D8DFF); }
/* Size variants */
.progress-sm { height: 4px; border-radius: 3px; }
.progress-sm .progress-bar { border-radius: 3px; }
.progress-lg { height: 12px; border-radius: 8px; }
.progress-lg .progress-bar { border-radius: 8px; }
/* With label inside */
.progress-labeled { height: 20px; border-radius: 10px; }
.progress-labeled .progress-bar { 
  border-radius: 10px; 
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px; font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.9); min-width: 40px;
}
#pwa-install-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 2px solid var(--color-success);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + var(--safe-bottom));
  z-index: 200;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-align: center;
  animation: slideUp 0.3s ease-out;
}
#pwa-update-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-primary);
  padding: var(--space-3) var(--space-4);
  z-index: 200;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-align: center;
  animation: slideDown 0.3s ease-out;
}
#pwa-redirect-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ── Live / RT pill pulse ── */
.live-pill {
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,255,136,.4); }
  50% { box-shadow: 0 0 0 6px rgba(34,255,136,0); }
}

/* ── PWA standalone adjustments ── */
.pwa-standalone .skip-to-content { top: 0; }
.pwa-standalone #status-bar { padding-top: env(safe-area-inset-top, 0px); }
.skip-to-content {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  z-index: 1000;
  text-decoration: none;
}
.skip-to-content:focus {
  top: var(--space-2);
}