/* omega-theme.css
 * Theme system, color modes, brand tokens, and elevation layers for Omega AI Web Builder
 */

/* ============================================================
   BASE THEME (LIGHT MODE)
   ============================================================ */

:root {
    /* Background layers */
    --omega-bg-0: #ffffff;
    --omega-bg-1: #f9fafb;
    --omega-bg-2: #f3f4f6;
    --omega-bg-3: #e5e7eb;

    /* Text colors */
    --omega-text-0: #111827;
    --omega-text-1: #374151;
    --omega-text-2: #6b7280;

    /* Border colors */
    --omega-border-0: #e5e7eb;
    --omega-border-1: #d1d5db;

    /* Primary brand colors */
    --omega-primary: #2563eb;
    --omega-primary-hover: #1d4ed8;
    --omega-primary-soft: #dbeafe;

    /* Accent colors */
    --omega-accent: #f97316;
    --omega-accent-soft: #ffedd5;

    /* Status colors */
    --omega-success: #16a34a;
    --omega-warning: #f59e0b;
    --omega-danger: #dc2626;

    /* Elevation */
    --omega-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --omega-shadow-md: 0 4px 6px rgba(0,0,0,0.08);
    --omega-shadow-lg: 0 10px 15px rgba(0,0,0,0.12);

    /* Radius */
    --omega-radius-sm: 4px;
    --omega-radius-md: 8px;
    --omega-radius-lg: 12px;
    --omega-radius-full: 9999px;
}

/* ============================================================
   DARK MODE
   ============================================================ */

.omega-dark {
    --omega-bg-0: #0f172a;
    --omega-bg-1: #1e293b;
    --omega-bg-2: #334155;
    --omega-bg-3: #475569;

    --omega-text-0: #f8fafc;
    --omega-text-1: #e2e8f0;
    --omega-text-2: #cbd5e1;

    --omega-border-0: #334155;
    --omega-border-1: #475569;

    --omega-primary: #3b82f6;
    --omega-primary-hover: #2563eb;
    --omega-primary-soft: #1e3a8a;

    --omega-accent: #fb923c;
    --omega-accent-soft: #7c2d12;

    --omega-success: #22c55e;
    --omega-warning: #fbbf24;
    --omega-danger: #ef4444;

    --omega-shadow-sm: 0 1px 2px rgba(255,255,255,0.05);
    --omega-shadow-md: 0 4px 6px rgba(255,255,255,0.08);
    --omega-shadow-lg: 0 10px 15px rgba(255,255,255,0.12);
}

/* ============================================================
   THEME SURFACES
   ============================================================ */

.omega-surface-0 { background-color: var(--omega-bg-0); }
.omega-surface-1 { background-color: var(--omega-bg-1); }
.omega-surface-2 { background-color: var(--omega-bg-2); }
.omega-surface-3 { background-color: var(--omega-bg-3); }

/* ============================================================
   TEXT COLORS
   ============================================================ */

.omega-text-strong { color: var(--omega-text-0); }
.omega-text-normal { color: var(--omega-text-1); }
.omega-text-muted { color: var(--omega-text-2); }

/* ============================================================
   BORDER UTILITIES
   ============================================================ */

.omega-border { border: 1px solid var(--omega-border-0); }
.omega-border-strong { border: 1px solid var(--omega-border-1); }
.omega-border-top { border-top: 1px solid var(--omega-border-0); }
.omega-border-bottom { border-bottom: 1px solid var(--omega-border-0); }

/* ============================================================
   BUTTON THEMES
   ============================================================ */

.omega-button-primary {
    background-color: var(--omega-primary);
    color: #fff;
    border-color: var(--omega-primary);
}

.omega-button-primary:hover {
    background-color: var(--omega-primary-hover);
}

.omega-button-accent {
    background-color: var(--omega-accent);
    color: #fff;
}

.omega-button-accent:hover {
    background-color: var(--omega-accent-soft);
}

.omega-button-danger {
    background-color: var(--omega-danger);
    color: #fff;
}

.omega-button-danger:hover {
    background-color: #b91c1c;
}

/* ============================================================
   CARD THEMES
   ============================================================ */

.omega-card {
    background-color: var(--omega-bg-0);
    border: 1px solid var(--omega-border-0);
    box-shadow: var(--omega-shadow-sm);
    border-radius: var(--omega-radius-lg);
}

.omega-card:hover {
    box-shadow: var(--omega-shadow-md);
}

/* ============================================================
   ELEVATION UTILITIES
   ============================================================ */

.omega-shadow-sm { box-shadow: var(--omega-shadow-sm); }
.omega-shadow-md { box-shadow: var(--omega-shadow-md); }
.omega-shadow-lg { box-shadow: var(--omega-shadow-lg); }

/* ============================================================
   BRAND ACCENT UTILITIES
   ============================================================ */

.omega-accent-bg { background-color: var(--omega-accent); color: #fff; }
.omega-accent-soft-bg { background-color: var(--omega-accent-soft); }

.omega-primary-bg { background-color: var(--omega-primary); color: #fff; }
.omega-primary-soft-bg { background-color: var(--omega-primary-soft); }

/* ============================================================
   THEME SWITCHING
   ============================================================ */

.omega-theme-light { background-color: var(--omega-bg-0); color: var(--omega-text-0); }
.omega-theme-dark { background-color: var(--omega-bg-0); color: var(--omega-text-0); }

.omega-theme-auto {
    color-scheme: light dark;
}

/* ============================================================
   TRANSITIONS
   ============================================================ */

.omega-theme-transition {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}