/* css/design-system.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Color Palette - HSL values for flexibility */
    --hue-primary: 220;
    --primary: hsl(var(--hue-primary), 90%, 56%);
    --primary-light: hsl(var(--hue-primary), 90%, 65%);
    --primary-dark: hsl(var(--hue-primary), 90%, 45%);
    --primary-fade: hsla(var(--hue-primary), 90%, 56%, 0.1);

    --success: hsl(150, 80%, 40%);
    --warning: hsl(40, 100%, 50%);
    --danger: hsl(350, 80%, 50%);

    /* Neumorphic/Glassmorphic Base */
    --surface-light: hsl(0, 0%, 98%);
    --surface-DEFAULT: hsl(0, 0%, 100%);
    --surface-dark: hsl(0, 0%, 95%);

    --text-main: hsl(220, 20%, 20%);
    --text-muted: hsl(220, 15%, 50%);

    --border-color: hsl(220, 15%, 90%);

    /* Aliases used by templates */
    --text-color: hsl(220, 20%, 20%);
    --bg-card: var(--surface-DEFAULT);
    --bg-body: var(--surface-light);
    --bg-hover: var(--surface-dark);
    --secondary: hsl(220, 15%, 60%);

    /* Typography */
    --font-family: 'Inter', 'Roboto', system-ui, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px hsla(var(--hue-primary), 20%, 10%, 0.05);
    --shadow-md: 0 4px 6px -1px hsla(var(--hue-primary), 20%, 10%, 0.1), 0 2px 4px -1px hsla(var(--hue-primary), 20%, 10%, 0.06);
    --shadow-lg: 0 10px 15px -3px hsla(var(--hue-primary), 20%, 10%, 0.1), 0 4px 6px -2px hsla(var(--hue-primary), 20%, 10%, 0.05);
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
}

/* Base Resets */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    color: var(--text-main);
    background-color: var(--surface-light);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}