/* =============================
   CSS Custom Properties (Variables)
   ============================= */
:root{
    --bg:#f8fafc;
    --bg-secondary:#f1f5f9;
    --card:#ffffff;
    --card-hover:#f8fafc;
    --muted:#64748b;
    --text:#0f172a;
    --text-secondary:#475569;
    --primary:#3b82f6;
    --primary-dark:#2563eb;
    --primary-light:#93c5fd;
    --accent:#10b981;
    --accent-light:#d1fae5;
    --border:#e2e8f0;
    --border-light:#f1f5f9;

    /* Extended radius & spacing scale */
    --radius-xs:4px;
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:24px;
    --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;

    /* Motion / easing */
    --ease-out: cubic-bezier(.16,.84,.44,1);
    --ease-in: cubic-bezier(.7,0,.84,0);
    --ease: cubic-bezier(.4,0,.2,1);
    --transition-fast:120ms;
    --transition:200ms;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
    --gradient-accent: linear-gradient(135deg,#10b981 0%,#059669 100%);
    --gradient-surface: linear-gradient(145deg,#ffffff 0%,#f1f5f9 100%);

    /* Elevation (updated shadow tokens for modern soft depth) */
    --shadow-sm:0 1px 2px rgba(0,0,0,.06);
    --shadow:0 2px 4px rgba(0,0,0,.08);
    --shadow-md:0 4px 12px rgba(0,0,0,.10);
    --shadow-lg:0 8px 24px rgba(0,0,0,.14);
    --shadow-xl:0 12px 32px rgba(0,0,0,.18);

    /* Semantic status */
    --danger:#ef4444;
    --danger-bg:#fee2e2;
    --warning:#f59e0b;
    --warning-bg:#fef3c7;
    --success:#10b981;
    --success-bg:#d1fae5;

    /* Rating color */
    --rating-star:#fbbf24;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f172a;
    --bg-secondary:#1e293b;
    --card:#1e293b;
    --card-hover:#263445;
    --text:#f1f5f9;
    --text-secondary:#cbd5e1;
    --muted:#94a3b8;
    --border:#334155;
    --border-light:#1e293b;
    --shadow-sm:0 1px 2px rgba(0,0,0,.7);
    --shadow:0 2px 4px rgba(0,0,0,.6);
    --shadow-md:0 4px 12px rgba(0,0,0,.55);
    --shadow-lg:0 8px 24px rgba(0,0,0,.5);
    --shadow-xl:0 12px 32px rgba(0,0,0,.45);
    --gradient-surface: linear-gradient(145deg,#1e293b 0%,#0f172a 100%);
    --danger-bg:#7f1d1d;
    --warning-bg:#78350f;
    --success-bg:#064e3b;
  }
}