/* =========================================================
   3-LAYER DESIGN TOKENS (LIGHT & DARK MODE)
   Plataforma de Imóveis - UI/UX Pro Max Architecture
   ========================================================= */

/* 1. PRIMITIVE TOKENS (Valores Brutos) */
:root {
    --color-white: #ffffff;
    --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;

    --color-brand-blue: #3b50b2;
    --color-brand-blue-hover: #2e3f94;
    --color-brand-green: #10b981;
    --color-brand-green-hover: #059669;
    --color-brand-dark: #0a0e1a;
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Plus Jakarta Sans', sans-serif;
}

/* 2. SEMANTIC TOKENS - LIGHT MODE (DEFAULT) */
:root, [data-theme="light"] {
    --bg-page: #f8fafc;
    --bg-surface: #ffffff;
    --bg-surface-elevated: #ffffff;
    --bg-muted: #f1f5f9;
    --bg-input: #ffffff;
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    
    --border-subtle: #e2e8f0;
    --border-card: rgba(226, 232, 240, 0.9);
    
    --color-primary: var(--color-brand-blue);
    --color-primary-hover: var(--color-brand-blue-hover);
    --color-accent: var(--color-brand-green);
    --color-accent-hover: var(--color-brand-green-hover);
    
    --top-bar-bg: #3b50b2;
    --top-bar-color: #ffffff;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    
    --card-hover-transform: translateY(-4px);
}

/* 2. SEMANTIC TOKENS - DARK MODE */
[data-theme="dark"] {
    --bg-page: #090d16;
    --bg-surface: #111827;
    --bg-surface-elevated: #1a233a;
    --bg-muted: #1e293b;
    --bg-input: #131b2e;
    
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-card: rgba(255, 255, 255, 0.1);
    
    --color-primary: #4f67db;
    --color-primary-hover: #3b50b2;
    --color-accent: #10b981;
    --color-accent-hover: #059669;
    
    --top-bar-bg: #273678;
    --top-bar-color: #f8fafc;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 30px 0 rgba(0, 0, 0, 0.6);
}

/* 3. COMPONENT TOKENS */
:root {
    --btn-height: 42px;
    --btn-radius: var(--radius-md);
    --card-radius: var(--radius-lg);
    --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
}