/* ==========================================================================
   Dryft Brand Tokens
   - Color, spacing, radii, shadows
   - Typography scale (sizes, line-heights, weights, letter-spacing)
   - Theme tokens for light/dark
   ========================================================================== */

/* Base (theme-agnostic defaults) */
:root {
    /* === Colors (defaults overridden by theme blocks below) === */
    --color-bg: #0f1221;
    --color-bg-elev: #171b33;
    --color-surface: #1d2240;
    --color-surface-2: #252a50;
    --color-text: #e9ecff;
    --color-text-muted: #b7bce0;
    --color-primary: #6ea8fe;
    --color-primary-600: #4b8df6;
    --color-accent: #7ee0d2;
    --color-danger: #ff6b6b;
    --color-warning: #ffcb6b;
    --color-success: #34d399;
    --color-border: #2a2f59;
    /* === Spacing === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    /* === Radii & Shadows === */
    --radius-1: 6px;
    --radius-2: 10px;
    --shadow-1: 0 8px 20px rgba(0,0,0,0.25);
    /* === Typography: families === */
    --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* === Typography: weights === */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* === Typography: line-heights === */
    --line-height-tight: 1.15;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
    /* === Typography: letter-spacing === */
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    /* === Typography: fluid size scale (clamp for responsiveness) === */
    --font-size-xs: clamp(0.72rem, 0.70rem + 0.1vw, 0.78rem); /* captions */
    --font-size-sm: clamp(0.84rem, 0.80rem + 0.2vw, 0.92rem); /* small text */
    --font-size-md: clamp(0.98rem, 0.96rem + 0.2vw, 1.05rem); /* body */
    --font-size-lg: clamp(1.10rem, 1.06rem + 0.3vw, 1.22rem); /* card titles */
    --font-size-xl: clamp(1.28rem, 1.20rem + 0.5vw, 1.5rem); /* section titles */
    --font-size-2xl: clamp(1.6rem, 1.4rem + 1vw, 2.0rem); /* page titles */
    /* === Component tokens === */
    --card-bg: var(--color-surface);
    --card-border: var(--color-border);
    --nav-bg: #0a0d1a;
    /* Environment badge colors */
    --env-paper: #0ea5e9; /* blue */
    --env-live: #ef4444; /* red */
    --env-sbx: #f59e0b; /* amber */
}

/* ===========================
   Dark theme
   =========================== */
html[data-bs-theme="dark"] {
    --color-bg: #0a0d1a;
    --color-bg-elev: #12162b;
    --color-surface: #161b35;
    --color-surface-2: #1b2145;
    --color-text: #e9ecff;
    --color-text-muted: #b7bce0;
    --color-primary: #6ea8fe;
    --color-primary-600: #4b8df6;
    --color-accent: #7ee0d2;
    --color-border: #23284d;
    --card-bg: var(--color-surface);
    --nav-bg: #070a14;
}

/* ===========================
   Light theme
   =========================== */
html[data-bs-theme="light"] {
    --color-bg: #f6f8ff;
    --color-bg-elev: #ffffff;
    --color-surface: #ffffff;
    --color-surface-2: #f0f3ff;
    --color-text: #0f1221;
    --color-text-muted: #3d4266;
    --color-primary: #2b6dff;
    --color-primary-600: #1d52d6;
    --color-accent: #0bbbc0;
    --color-border: #dfe3ff;
    --card-bg: var(--color-surface);
    --nav-bg: #ffffff;
}

/* Theme token bridges for widgets and modals*/
:root[data-bs-theme="dark"] {
    --widget-grid-bg: var(--app-surface-2, #0f131a);
    --widget-card-bg: var(--app-surface-bg, #161a22);
    --widget-card-fg: var(--app-fg, #e6e9ef);
    --widget-card-border: var(--app-border, rgba(255,255,255,.08));
    --widget-card-header-bg: color-mix(in srgb, var(--widget-card-bg) 90%, white);
    --widget-card-header-fg: var(--widget-card-fg);
    --modal-bg: var(--app-surface-bg, #161a22);
    --modal-fg: var(--app-fg, #e6e9ef);
    --modal-border: var(--app-border, rgba(255,255,255,.08));
    --modal-header-bg: color-mix(in srgb, var(--modal-bg) 90%, white);
    --modal-header-fg: var(--modal-fg);
}

:root[data-bs-theme="light"] {
    --widget-grid-bg: var(--app-surface-2, #f3f5f8); /* slightly different from card */
    --widget-card-bg: var(--app-surface-bg, #ffffff);
    --widget-card-fg: var(--app-fg, #1b1f23);
    --widget-card-border: var(--app-border, rgba(0,0,0,.08));
    --widget-card-header-bg: color-mix(in srgb, var(--widget-card-bg) 95%, black);
    --widget-card-header-fg: var(--widget-card-fg);
    --modal-bg: var(--app-surface-bg, #ffffff);
    --modal-fg: var(--app-fg, #1b1f23);
    --modal-border: var(--app-border, rgba(0,0,0,.08));
    --modal-header-bg: color-mix(in srgb, var(--modal-bg) 95%, black);
    --modal-header-fg:var(--modal-fg) ;
}

/* Apply to the gallery modal specifically (beats Bootstrap defaults) */
#widgetGalleryModal .modal-content {
    background-color: var(--modal-bg);
    color: var(--modal-fg);
    border-color: var(--modal-border);
}

#widgetGalleryModal .modal-header.bg-nav {
    background-color: var(--modal-header-bg);
    color: var(--modal-header-fg);
}

#widgetGalleryModal .modal-body.bg-surface {
    background-color: var(--modal-bg);
    color: var(--modal-fg);
}

#widgetGalleryModal .modal-footer.bg-surface-2 {
    background-color: var(--app-surface-2, color-mix(in srgb, var(--modal-bg) 92%, black));
    border-top: 1px solid var(--modal-border);
}

#widgetGalleryModal .list-group-item {
    background: transparent;
    color: var(--modal-fg);
    border-color: var(--modal-border);
}