/* =========================================================
   THEME TOKENS — Tuiya Belong Property
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ── Accent ── */
    --accent:          #3b82f6;
    --accent-dark:     #2563eb;
    --accent-light:    #93bbfd;
    --accent-bg:       #eff6ff;

    /* ── Semantic ── */
    --success:         #10b981;
    --success-bg:      #ecfdf5;
    --danger:          #ef4444;
    --danger-bg:       #fef2f2;
    --warning:         #f59e0b;
    --warning-bg:      #fffbeb;
    --info:            #06b6d4;
    --info-bg:         #ecfeff;

    /* ── Surfaces (Light Mode) ── */
    --bg-main:         #f1f5f9;
    --bg-card:         #ffffff;
    --bg-sidebar:      #0f172a;
    --bg-hover:        #f8fafc;

    /* ── Text ── */
    --text-main:       #0f172a;
    --text-secondary:  #334155;
    --text-muted:      #64748b;
    --text-faint:      #94a3b8;
    --text-inverse:    #f8fafc;

    /* ── Borders ── */
    --border:          #e2e8f0;
    --border-focus:    #3b82f6;

    /* ── Shadows ── */
    --shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --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 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl:       0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);

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

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

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

    --text-xs:         0.75rem;
    --text-sm:         0.8125rem;
    --text-base:       0.875rem;
    --text-lg:         1rem;
    --text-xl:         1.125rem;
    --text-2xl:        1.375rem;
    --text-3xl:        1.75rem;
    --text-4xl:        2.25rem;

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

    /* ── Layout ── */
    --sidebar-width:   240px;
    --sidebar-collapsed: 72px;
    --top-nav-height:  64px;
    --footer-height:   auto;

    /* ── 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);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-index ── */
    --z-dropdown:      50;
    --z-sticky:        100;
    --z-fixed:         200;
    --z-modal-backdrop: 300;
    --z-modal:         400;
    --z-toast:         500;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
    --bg-main:         #0f172a;
    --bg-card:         #1e293b;
    --bg-sidebar:      #0f172a;
    --bg-hover:        #1e293b;

    --text-main:       #f1f5f9;
    --text-secondary:  #cbd5e1;
    --text-muted:      #94a3b8;
    --text-faint:      #64748b;

    --border:          #334155;

    --accent-bg:       rgba(59, 130, 246, 0.15);
    --success-bg:      rgba(16, 185, 129, 0.15);
    --danger-bg:       rgba(239, 68, 68, 0.15);
    --warning-bg:      rgba(245, 158, 11, 0.15);

    --shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md:       0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg:       0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
}