/* 
 * Quick Server - Core CSS
 * 
 * ARCHITECTURE RULES:
 * 1. DO NOT define CSS variables here - they come from /sundayapp/css/tokens.css
 * 2. Only provide minimal fallback variables for emergency scenarios
 * 3. All variable usages MUST have fallbacks
 * 
 * Created: Monday, December 16, 2025
 * Last Updated: Monday, December 16, 2025
 */

/* ============================================
   EMERGENCY FALLBACK VARIABLES
   ============================================
   These are ONLY used if tokens.css fails to load.
   In normal operation, tokens.css will override these.
   ============================================ */
:root {
  /* Fallback values - tokens.css will override these if loaded */
  --bg: var(--sunday-bg, #0b0c10);
  --card: var(--sunday-card, #0f131c);
  --ink: var(--sunday-text, #e9f3ff);
  --muted: var(--sunday-text-muted, #9bb1c7);
  --brand: var(--sunday-brand, #7ce3ff);
  --brand2: var(--sunday-accent-alt, #60ffa8);
  --line: var(--sunday-line, #1e2636);
  --shadow: rgba(3,8,18,.5);
  --radius: 16px;
  --gap: 16px;
}

[data-theme="light"] {
  --bg: var(--sunday-bg, #ffffff);
  --card: var(--sunday-card, #f8fafc);
  --ink: var(--sunday-text, #0f172a);
  --muted: var(--sunday-text-muted, #64748b);
  --brand: var(--sunday-brand, #0ea5e9);
  --brand2: var(--sunday-accent-alt, #10b981);
  --line: var(--sunday-line, #e2e8f0);
  --shadow: rgba(15,23,42,.1);
}

/* ============================================
   BASE STYLES
   ============================================
   Minimal styles that use variables from tokens.css
   ============================================ */

* {
  box-sizing: border-box;
}

html, body {
  background: radial-gradient(1200px 500px at 15% -10%, rgba(124,227,255,.14), transparent 50%),
             radial-gradient(900px 450px at 90% -10%, rgba(96,255,168,.09), transparent 60%), 
             var(--bg, var(--sunday-bg, #0b0c10));
  color: var(--ink, var(--sunday-text, #e9f3ff));
  font-family: Inter, ui-sans-serif, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="light"] html, 
[data-theme="light"] body {
  background: radial-gradient(1200px 500px at 15% -10%, rgba(14,165,233,.08), transparent 50%),
             radial-gradient(900px 450px at 90% -10%, rgba(16,185,129,.06), transparent 60%), 
             var(--bg, var(--sunday-bg, #ffffff));
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes slideIn {
  from { transform: translateX(400px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(400px); opacity: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}