/*
 * Design Tokens
 * Centralized CSS custom properties for the Smaug design system
 * Version: 1.0
 */

:root {
    /* ===== Text Colors (RGB base) ===== */
    --smaug-text-rgb: 232, 232, 240;
    --smaug-text-primary: rgba(var(--smaug-text-rgb), 0.95);
    --smaug-text-secondary: rgba(var(--smaug-text-rgb), 0.7);
    --smaug-text-tertiary: rgba(var(--smaug-text-rgb), 0.5);
    --smaug-text-disabled: rgba(var(--smaug-text-rgb), 0.35);
    --smaug-text-hint: rgba(var(--smaug-text-rgb), 0.4);

    /* ===== Surface Colors (RGB base) ===== */
    --smaug-bg-rgb: 33, 33, 33;
    --smaug-bg-surface: rgba(var(--smaug-bg-rgb), 0.8);
    --smaug-bg-surface-heavy: rgba(var(--smaug-bg-rgb), 0.9);
    --smaug-bg-surface-solid: rgba(var(--smaug-bg-rgb), 0.95);
    --smaug-bg-overlay: rgba(var(--smaug-bg-rgb), 0.98);
    --smaug-bg-subtle: rgba(255, 255, 255, 0.02);
    --smaug-bg-subtle-hover: rgba(255, 255, 255, 0.05);

    /* ===== Glass Effects ===== */
    --smaug-glass-bg: rgba(var(--smaug-bg-rgb), 0.8);
    --smaug-glass-blur: blur(20px) saturate(180%);
    --smaug-glass-bg-heavy: rgba(var(--smaug-bg-rgb), 0.9);

    /* ===== Accent Color (RGB base) ===== */
    --smaug-accent-rgb: 0, 150, 255;
    --smaug-accent: rgba(var(--smaug-accent-rgb), 1);
    --smaug-accent-hover: rgba(var(--smaug-accent-rgb), 0.15);
    --smaug-accent-subtle: rgba(var(--smaug-accent-rgb), 0.05);
    --smaug-accent-gradient: linear-gradient(135deg, rgba(var(--smaug-accent-rgb), 0.1) 0%, rgba(56, 182, 255, 0.05) 100%);

    /* ===== Borders ===== */
    --smaug-border-subtle: rgba(var(--smaug-text-rgb), 0.06);
    --smaug-border-medium: rgba(var(--smaug-text-rgb), 0.1);
    --smaug-border-strong: rgba(var(--smaug-text-rgb), 0.2);

    /* ===== Spacing ===== */
    --smaug-space-xs: 4px;
    --smaug-space-sm: 8px;
    --smaug-space-md: 16px;
    --smaug-space-lg: 24px;
    --smaug-space-xl: 32px;
    --smaug-space-2xl: 48px;

    /* ===== Border Radii ===== */
    --smaug-radius-sm: 8px;
    --smaug-radius-md: 12px;
    --smaug-radius-lg: 16px;
    --smaug-radius-xl: 20px;

    /* ===== Shadows ===== */
    --smaug-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --smaug-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
    --smaug-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
    --smaug-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.4);

    /* ===== Transitions ===== */
    --smaug-transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --smaug-transition-quick: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Light Theme Overrides ===== */
.theme-light {
    --smaug-text-rgb: 0, 0, 0;
    --smaug-text-primary: rgba(0, 0, 0, 0.87);
    --smaug-text-secondary: rgba(0, 0, 0, 0.6);
    --smaug-text-tertiary: rgba(0, 0, 0, 0.5);
    --smaug-text-disabled: rgba(0, 0, 0, 0.35);
    --smaug-text-hint: rgba(0, 0, 0, 0.4);

    --smaug-bg-rgb: 255, 255, 255;
    --smaug-bg-surface: rgba(255, 255, 255, 0.8);
    --smaug-bg-surface-heavy: rgba(255, 255, 255, 0.9);
    --smaug-bg-surface-solid: rgba(255, 255, 255, 0.95);
    --smaug-bg-overlay: rgba(255, 255, 255, 0.98);
    --smaug-bg-subtle: rgba(0, 0, 0, 0.02);
    --smaug-bg-subtle-hover: rgba(0, 0, 0, 0.05);

    --smaug-glass-bg: rgba(255, 255, 255, 0.8);
    --smaug-glass-bg-heavy: rgba(255, 255, 255, 0.9);

    --smaug-border-subtle: rgba(0, 0, 0, 0.06);
    --smaug-border-medium: rgba(0, 0, 0, 0.08);
    --smaug-border-strong: rgba(0, 0, 0, 0.15);

    --smaug-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --smaug-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
    --smaug-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
    --smaug-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.1);
}