/* Reset and Design System theme definitions */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-size: 16px;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
}

:root {
    /* Color Palette - HSL tailored premium hues */
    --hue-primary: 258;    /* Premium purple */
    --hue-accent: 195;     /* Sleek cyan */
    --hue-success: 145;    /* Harmonious green */
    --hue-warning: 38;      /* Warm amber */
    --hue-danger: 350;     /* Deep coral */

    color-scheme: dark;
    
    /* Dark Theme Variables */
    --color-bg-gradient: radial-gradient(circle at 50% 50%, hsl(260, 40%, 8%), hsl(260, 30%, 4%));
    --color-surface: hsla(258, 20%, 12%, 0.65);
    --color-surface-hover: hsla(258, 20%, 18%, 0.8);
    --color-surface-active: hsla(258, 25%, 22%, 0.9);
    --color-border: hsla(258, 15%, 25%, 0.4);
    --color-border-hover: hsla(258, 20%, 45%, 0.6);
    --color-text-primary: hsl(0, 0%, 95%);
    --color-text-secondary: hsl(258, 15%, 70%);
    --color-text-muted: hsl(258, 10%, 50%);

    --color-brand: hsl(var(--hue-primary), 85%, 65%);
    --color-accent: hsl(var(--hue-accent), 85%, 60%);
    --color-success: hsl(var(--hue-success), 80%, 55%);
    --color-warning: hsl(var(--hue-warning), 80%, 55%);
    --color-danger: hsl(var(--hue-danger), 80%, 55%);

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Shadows & Borders */
    --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    --shadow-glow: 0 0 15px hsla(var(--hue-primary), 80%, 60%, 0.25);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light mode overrides */
:root[data-theme="light"] {
    color-scheme: light;
    --color-bg-gradient: linear-gradient(135deg, hsl(258, 30%, 95%), hsl(195, 30%, 95%));
    --color-surface: hsla(258, 20%, 98%, 0.8);
    --color-surface-hover: hsla(258, 20%, 93%, 0.95);
    --color-surface-active: hsla(258, 20%, 88%, 1);
    --color-border: hsla(258, 15%, 85%, 0.7);
    --color-border-hover: hsla(258, 20%, 70%, 0.8);
    --color-text-primary: hsl(258, 30%, 15%);
    --color-text-secondary: hsl(258, 15%, 40%);
    --color-text-muted: hsl(258, 10%, 60%);
    --color-brand: hsl(var(--hue-primary), 75%, 50%);
    --shadow-soft: 0 8px 32px 0 rgba(142, 126, 178, 0.15);
}