/* ═══════════════════════════════════════════════════════
   MyTenantsBook — Design Tokens
   Single source of truth for the entire project
   ═══════════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ── */
    --brand-50: #eef5ff;
    --brand-100: #d9e8ff;
    --brand-200: #bcd7ff;
    --brand-300: #8ec0ff;
    --brand-400: #599eff;
    --brand-500: #3478f6;
    --brand-600: #1d5beb;
    --brand-700: #1647d8;
    --brand-800: #183caf;
    --brand-900: #1a378a;
    --brand-950: #142354;

    /* ── Grays (cool-tinted) ── */
    --gray-25: #fcfcfd;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gray-950: #020617;

    /* ── Semantic ── */
    --success-light: rgba(16, 185, 129, 0.12);
    --success: #10b981;
    --warning-light: rgba(245, 158, 11, 0.12);
    --warning: #f59e0b;
    --error-light: rgba(239, 68, 68, 0.12);
    --error: #ef4444;

    /* ── Surfaces ── */
    --surface-page: #ffffff;
    --surface-card: #ffffff;
    --surface-glass: rgba(255, 255, 255, 0.85);
    --surface-elevated: #ffffff;

    /* ── Text ── */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-600);
    --text-muted: var(--gray-500);
    --text-inverse: #ffffff;

    /* ── Borders ── */
    --border: var(--gray-200);
    --border-hover: var(--gray-300);
    --border-focus: var(--brand-500);

    /* ── Shadows ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-brand: 0 8px 24px -4px rgba(29, 91, 235, 0.25);

    /* ── Radius ── */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* ── Spacing scale ── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* ── Motion ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* ── Z-index layers ── */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-navbar: 1000;
    --z-modal: 2000;
    --z-toast: 3000;
}

/* ── Dark Mode Overrides ── */
html.dark-mode {
    /* User Requested Specific Colors */
    --surface-page: #0F172A;       /* Background */
    --surface-card: #111827;       /* Cards */
    --surface-glass: rgba(15, 23, 42, 0.85); /* Darker glass blur background */
    --surface-elevated: #1F2937;   /* Secondary Cards */
    
    /* Text Colors */
    --text-primary: #F9FAFB;       /* Text */
    --text-secondary: #CBD5E1;     /* Secondary Text */
    --text-muted: #94a3b8;         /* Grayed out metadata text */
    
    /* Borders */
    --border: #374151;             /* Border */
    --border-hover: #4B5563;
    
    /* Buttons */
    --primary: #2563EB;
    --primary-2: #1D4ED8;
    
    /* mytenantsbook-tokens.css Overrides */
    --bg: #0F172A;                 /* Wrapper background */
    --surface: #111827;            /* Base surface */
    --text: #F9FAFB;
    --muted: #CBD5E1;
    
    /* Inputs */
    --input-bg: #1F2937;
    --input-border: #4B5563;
    
    /* Gray overrides to flip theme */
    --gray-50: #111827;
    --gray-100: #1F2937;
    --gray-200: #374151;
    --gray-900: #F9FAFB;
}

/* Specific component overrides for Dark Mode */
html.dark-mode .input,
html.dark-mode .form-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}