/**
 * Sadan Design Tokens — Single source of truth
 * Enqueued globally before all other stylesheets.
 * Do NOT add component styles here — only custom properties.
 */
:root {
    /* ── Brand colors ─────────────────────────────────────────── */
    --color-primary-50:  #f0f4f8;
    --color-primary-100: #d9e2ec;
    --color-primary-200: #bcccdc;
    --color-primary-300: #9fb3c8;
    --color-primary-400: #829ab1;
    --color-primary-500: #627d98;
    --color-primary-600: #486581;
    --color-primary-700: #334e68;
    --color-primary-800: #243b53;
    --color-primary-900: #233F5A;   /* Original brand primary */

    --color-accent-50:  #f7faec;
    --color-accent-100: #ebf3cd;
    --color-accent-200: #dde9a8;
    --color-accent-300: #cadc7c;
    --color-accent-400: #B3CB63;   /* Original brand accent */
    --color-accent-500: #94AB45;
    --color-accent-600: #6B7E2E;
    --color-accent-700: #515f24;

    /* ── Semantic ─────────────────────────────────────────────── */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger:  #ef4444;
    --color-info:    #3b82f6;

    /* ── Neutrals / ink ──────────────────────────────────────── */
    --color-ink:           #0f172a;
    --color-ink-muted:     #475569;
    --color-ink-faint:     #94a3b8;
    --color-border:        #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-surface:       #f8fafc;
    --color-card:          #ffffff;

    /* ── Typography ──────────────────────────────────────────── */
    --font-base:    'Cairo', system-ui, sans-serif;
    --font-display: 'Cairo', system-ui, sans-serif;
    --font-mono:    'Menlo', 'Consolas', 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;

    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.75;

    /* ── Spacing (4 px 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;

    /* ── Border radii ────────────────────────────────────────── */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

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

    /* ── Transitions ─────────────────────────────────────────── */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index scale ───────────────────────────────────────── */
    --z-base:           1;
    --z-dropdown:       100;
    --z-sticky:         200;
    --z-fixed:          300;
    --z-modal-backdrop: 1000;
    --z-modal:          1001;
    --z-popover:        1100;
    --z-tooltip:        1200;
    --z-notification:   1300;

    /* ── Breakpoints (reference only, use literal values in MQs) */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}

/* Reduced motion — disable animations for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:       0.01ms !important;
        animation-iteration-count: 1     !important;
        transition-duration:      0.01ms !important;
        scroll-behavior:          auto   !important;
    }
}

/* ─── Dark Mode Tokens ─────────────────────────────────────────────────
   Only override semantic/surface tokens — brand palette stays the same.
   Real estate sites in Egypt skew conservative; keep dark mode subtle
   (deep navy surfaces, not pure black) to project luxury & trust.
   ──────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        /* Surfaces */
        --color-surface:       #0f1c2b;   /* deep navy page bg */
        --color-card:          #162030;   /* slightly lighter cards */
        --color-border:        #243b53;
        --color-border-strong: #334e68;

        /* Ink (text) */
        --color-ink:       #e2e8f0;       /* off-white body text  */
        --color-ink-muted: #94a3b8;       /* muted text  */
        --color-ink-faint: #475569;       /* very faint / placeholders  */

        /* Shadows (strengthen in dark to keep depth) */
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    }
}