/* 
 * Base Design Tokens for Lavdin Modern Architecture
 * These variables power the entire frontend component library.
 */

:root {
    /* System Tokens */
    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-amber-800: #92400e;
    --color-amber-950: #451a03;
    
    --color-black: #000000;
    --color-white: #ffffff;
    
    --color-blue-50: #eff6ff;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-800: #1e40af;
    --color-blue-900: #1e3a8a;
    --color-blue-950: #172554;
    
    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d1fae5;
    --color-emerald-400: #34d399;
    --color-emerald-500: #10b981;
    --color-emerald-600: #059669;
    --color-emerald-700: #047857;
    --color-emerald-800: #065f46;
    
    --color-indigo-50: #eef2ff;
    --color-indigo-100: #e0e7ff;
    --color-indigo-200: #c7d2fe;
    --color-indigo-300: #a5b4fc;
    --color-indigo-400: #818cf8;
    --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5;
    --color-indigo-700: #4338ca;
    --color-indigo-900: #312e81;
    --color-indigo-950: #1e1b4b;
    
    --color-red-50: #fef2f2;
    --color-red-100: #fee2e2;
    --color-red-400: #f87171;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-red-800: #991b1b;
    
    --color-rose-50: #fff1f2;
    --color-rose-500: #f43f5e;
    --color-rose-600: #e11d48;
    
    /* CORE SLATE SCALE */
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-slate-950: #020617;

    /* Base Colors - Fallbacks */
    --color-primary: var(--color-blue-600);
    --color-primary-hover: var(--color-blue-700);
    --color-secondary: var(--color-emerald-500);
    --color-accent: var(--color-amber-500);
    
    /* LIGHT THEME (Default :root) */
    --color-bg-main: var(--color-slate-50);
    --color-bg-surface: var(--color-white);
    --color-bg-elevated: var(--color-white);
    --color-bg-glass: rgba(255, 255, 255, 0.85);
    
    /* Text Colors (Light Theme) */
    --color-text-main: var(--color-slate-800);
    --color-text-muted: var(--color-slate-500);
    --color-text-light: var(--color-white);

    /* Border Colors (Light Theme) */
    --color-border-main: var(--color-slate-200);
    --color-border-light: rgba(0, 0, 0, 0.05);
    --color-border-glass: rgba(255, 255, 255, 0.2);

    /* Legacy compatibility */
    --pm-primary: var(--color-primary);
    --pm-blue: var(--color-primary);
    --booking-primary: var(--color-primary);
    --pm-indigo: var(--color-secondary);
    --accent-primary: var(--color-accent);

    /* Typography */
    --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family-heading: 'Outfit', system-ui, -apple-system, sans-serif;

    /* Radiuses */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 6px;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* DARK THEME Overrides */
html[data-theme="dark"], body.dark-theme, body.dark-mode {
    /* Semantic Overrides */

    --color-bg-main: var(--color-slate-950);
    --color-bg-surface: var(--color-slate-900);
    --color-bg-elevated: var(--color-slate-800);
    --color-bg-glass: rgba(0, 0, 0, 0.6);
    
    --color-text-main: var(--color-slate-50);
    --color-text-muted: var(--color-slate-400);
    --color-text-light: var(--color-slate-950);
    
    --color-border-main: var(--color-slate-700);
    --color-border-light: rgba(255, 255, 255, 0.05);
    --color-border-glass: rgba(0, 0, 0, 0.2);
}

/* Global resets specifically for the custom architecture */
body {
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    font-family: var(--font-family-base);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-family-heading);
}

/* Utility classes for text colors matching our tokens */
.text-main { color: var(--color-text-main) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-accent { color: var(--color-accent) !important; }