/**
 * CSS Design Tokens — Contract Box Realty
 * All colors, sizes, and transitions defined here.
 * Dark mode: mandatory on every component.
 */

:root {
    /* ── Brand ──────────────────────────────────────────────── */
    --primary:        #1a3a5c;   /* Deep navy */
    --primary-dark:   #0f2440;
    --primary-light:  #2a5280;
    --accent:         #c9a84c;   /* Gold */
    --accent-dark:    #a8872e;

    /* ── Text (light mode) ──────────────────────────────────── */
    --text-primary:   #1a1a2e;
    --text-secondary: #555;
    --text-muted:     #888;
    --text-white:     #fff;
    --text-inverse:   #fff;

    /* ── Backgrounds (light mode) ───────────────────────────── */
    --bg-page:        #f4f6f9;
    --bg-card:        #ffffff;
    --bg-input:       #ffffff;
    --bg-hover:       #f0f4f8;
    --bg-stripe:      #f8fafb;

    /* ── Borders ────────────────────────────────────────────── */
    --border:         #d8e0ea;
    --border-focus:   var(--primary);

    /* ── Status ─────────────────────────────────────────────── */
    --success:        #2e7d32;
    --success-bg:     #e8f5e9;
    --success-text:   #1b5e20;

    --error:          #c62828;
    --error-bg:       #ffebee;
    --error-text:     #b71c1c;

    --warning:        #e65100;
    --warning-bg:     #fff3e0;
    --warning-text:   #bf360c;

    --info:           #0277bd;
    --info-bg:        #e1f5fe;
    --info-text:      #01579b;

    /* ── Layout ─────────────────────────────────────────────── */
    --nav-height:     64px;
    --sidebar-width:  260px;
    --radius:         8px;
    --radius-lg:      16px;
    --radius-xl:      24px;

    /* ── Shadows ────────────────────────────────────────────── */
    --shadow-sm:      0 1px 4px rgba(0,0,0,0.08);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg:      0 12px 40px rgba(0,0,0,0.18);
    --shadow-xl:      0 24px 64px rgba(0,0,0,0.24);

    /* ── Transitions ────────────────────────────────────────── */
    --t-fast:         0.15s ease;
    --t-normal:       0.25s ease;
    --t-slow:         0.4s ease;

    /* ── Typography ─────────────────────────────────────────── */
    --font-sans:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono:      'SF Mono', 'Fira Code', 'Consolas', monospace;
    --font-size-base: 15px;
    --line-height:    1.5;
}

/* ── Dark Mode ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --primary:        #2a5280;
        --primary-dark:   #1a3a5c;
        --primary-light:  #3a6fa0;

        --text-primary:   #e8edf2;
        --text-secondary: #aab4c0;
        --text-muted:     #6b7c8e;

        --bg-page:        #0f1923;
        --bg-card:        #1a2535;
        --bg-input:       #1f2d3d;
        --bg-hover:       #243347;
        --bg-stripe:      #1e2b3c;

        --border:         #2a3d52;
        --border-focus:   #4a8fc4;

        --success-bg:     #1a2e1a;
        --success-text:   #66bb6a;

        --error-bg:       #2e1a1a;
        --error-text:     #ef5350;

        --warning-bg:     #2e2010;
        --warning-text:   #ffa726;

        --info-bg:        #102030;
        --info-text:      #4fc3f7;

        --shadow-sm:      0 1px 4px rgba(0,0,0,0.3);
        --shadow-md:      0 4px 16px rgba(0,0,0,0.4);
        --shadow-lg:      0 12px 40px rgba(0,0,0,0.5);
        --shadow-xl:      0 24px 64px rgba(0,0,0,0.6);
    }
}