:root {
    /* =========================================
       Light Theme Palette
       ========================================= */

    /* Core Colors */
    --bg-body: #ffffff;
    --bg-surface: #f3f4f6;
    --border-color: #e5e7eb;
    --color-white: #000000;
    /* Semantic mapping for primary text base in this system */
    --color-muted: #6b7280;

    /* Semantic Mappings */
    --bg-color: var(--bg-body);
    --bg-surface-2: rgba(0, 0, 0, 0.03);
    /* Subtle elevation */
    --bg-floating: rgba(255, 255, 255, 0.95);

    --border-subtle: var(--border-color);
    --border-medium: #d1d5db;
    --border-highlight: rgba(0, 0, 0, 0.05);

    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-tertiary: #9ca3af;
    --text-on-light: #ffffff;

    /* Brand */
    --primary: #000000;
    --primary-hover: rgba(0, 0, 0, 0.8);
    --brand-primary: #000000;

    /* Functional States */
    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;
    --info: #2563eb;

    /* Backgrounds for States */
    --bg-soft-primary: rgba(0, 0, 0, 0.05);
    --bg-soft-success: rgba(22, 163, 74, 0.1);
    --bg-soft-warning: rgba(217, 119, 6, 0.1);
    --bg-soft-danger: rgba(220, 38, 38, 0.1);

    /* Card & Hover States */
    --bg-card-hover: #ffffff;
    --bg-card-base: #ffffff;
    --bg-card-hover-strong: #f9fafb;
    --bg-glass-hover: rgba(0, 0, 0, 0.02);

    /* Secondary Elements (Toggles, Social Links) */
    --bg-secondary-element: rgba(0, 0, 0, 0.08);
    --bg-secondary-hover: rgba(0, 0, 0, 0.1);

    --focus-ring: rgba(0, 0, 0, 0.05);

    /* Pastel Palette (Badges & Alerts) */
    /* Light Theme: Soft backgrounds, darker readable text */
    --color-primary-pastel-bg: #f3e8ff;
    /* Soft Purple */
    --color-primary-pastel-text: #6b21a8;
    /* Dark Purple */

    --color-success-pastel-bg: #dcfce7;
    /* Soft Green */
    --color-success-pastel-text: #166534;
    /* Dark Green */

    --color-warning-pastel-bg: #fef3c7;
    /* Soft Amber */
    --color-warning-pastel-text: #92400e;
    /* Dark Amber */

    --color-danger-pastel-bg: #fee2e2;
    /* Soft Red */
    --color-danger-pastel-text: #991b1b;
    /* Dark Red */

    --color-info-pastel-bg: #dbeafe;
    /* Soft Blue */
    --color-info-pastel-text: #1e40af;
    /* Dark Blue */

    --color-neutral-pastel-bg: #f3f4f6;
    /* Soft Gray */
    --color-neutral-pastel-text: #374151;
    /* Dark Gray */

    /* Glass System */
    --glass-bg: rgba(255, 255, 255, 0.5);
    --glass-blur: blur(20px);
    --glass-border: var(--border-color);
    --glass-border-light: rgba(0, 0, 0, 0.1);
    --glass-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.1);

    /* UI Elements */
    --btn-text-dark: #ffffff;

    /* Component Shadows */
    --glass-shadow-hover: 0 30px 60px -12px rgba(0, 0, 0, 0.15);
    --btn-primary-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --btn-primary-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.25);

    /* Shadows */
    /* Lighter shadows for light mode */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05);

    --gradient-text-brand: linear-gradient(135deg, #000000 30%, var(--color-muted) 100%);

    /* Liquid Glass */
    --liqglass-bg: rgba(255, 255, 255, 0.55);
    --liqglass-border: rgba(255, 255, 255, 0.70);
    --liqglass-rim: rgba(255, 255, 255, 0.90);
    --liqglass-shadow: rgba(0, 0, 0, 0.10);
    --liqglass-gradient: linear-gradient(135deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.10) 60%, transparent 100%);
    --liqglass-sheen: rgba(255, 255, 255, 0.40);
    --liqglass-item-active: rgba(0, 0, 0, 0.06);
    --liqglass-item-hover: rgba(0, 0, 0, 0.03);
}