@import "theme-light.css";
@import "theme-dark.css";

@layer tokens {
    :root {
        /* Colors: Light Theme Palette */
        --hue-primary: 220; /* Slate Blue */
        --hue-secondary: 260; /* Violet */
        --hue-accent: 140; /* Emerald Green */
        --hue-danger: 0; /* Crimson Red */
        --hue-warning: 35; /* Amber Gold */
        
        --color-primary: hsl(var(--hue-primary), 65%, 45%);
        --color-primary-hover: hsl(var(--hue-primary), 65%, 35%);
        --color-primary-light: hsl(var(--hue-primary), 20%, 96%);
        
        --color-secondary: hsl(var(--hue-secondary), 55%, 45%);
        --color-accent: hsl(var(--hue-accent), 55%, 40%);
        --color-danger: hsl(var(--hue-danger), 65%, 45%);
        --color-danger-light: hsl(var(--hue-danger), 50%, 97%);
        --color-warning: hsl(var(--hue-warning), 70%, 40%);
        --color-warning-light: hsl(var(--hue-warning), 50%, 97%);
        --color-success: hsl(var(--hue-accent), 55%, 40%);
        --color-success-light: hsl(var(--hue-accent), 50%, 97%);
        
        --color-bg-base: hsl(0, 0%, 100%);
        --color-bg-surface: hsl(var(--hue-primary), 20%, 98%);
        --color-bg-border: hsl(var(--hue-primary), 15%, 90%);
        
        --color-text-main: hsl(var(--hue-primary), 30%, 15%);
        --color-text-muted: hsl(var(--hue-primary), 15%, 45%);
        --color-text-light: hsl(0, 0%, 100%);

        /* Accessibility Focus Indicators */
        --color-focus: hsl(var(--hue-primary), 90%, 50%);
        --outline-ring: 3px solid var(--color-focus);
        --outline-offset: 2px;

        /* Typography */
        --font-family: 'Inter', system-ui, -apple-system, sans-serif;
        --font-size-base: 1rem;      /* 16px */
        --font-size-sm: 0.875rem;    /* 14px */
        --font-size-lg: 1.125rem;    /* 18px */
        --font-size-xl: 1.25rem;     /* 20px */
        --font-size-2xl: 1.5rem;     /* 24px */
        --font-size-3xl: 2rem;       /* 32px */
        
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;

        --line-height-base: 1.6;
        --line-height-tight: 1.3;

        /* Spacing (4px grid) */
        --spacing-1: 0.25rem;  /* 4px */
        --spacing-2: 0.5rem;   /* 8px */
        --spacing-3: 0.75rem;  /* 12px */
        --spacing-4: 1rem;     /* 16px */
        --spacing-6: 1.5rem;   /* 24px */
        --spacing-8: 2rem;     /* 32px */
        --spacing-12: 3rem;    /* 48px */
        --spacing-16: 4rem;    /* 64px */

        /* Borders & Radii */
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;
        
        --border-width-thin: 1px;
        --border-width-thick: 2px;

        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);

        /* Transitions */
        --transition-duration: 0.2s;
        --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
        --transition-base: all var(--transition-duration) var(--transition-easing);
    }

    /* Dark Theme overrides */
    [data-theme="dark"] {
        --color-primary: hsl(var(--hue-primary), 75%, 60%);
        --color-primary-hover: hsl(var(--hue-primary), 75%, 70%);
        --color-primary-light: hsl(var(--hue-primary), 20%, 16%);
        
        --color-secondary: hsl(var(--hue-secondary), 65%, 65%);
        --color-accent: hsl(var(--hue-accent), 65%, 55%);
        --color-danger: hsl(var(--hue-danger), 75%, 60%);
        --color-danger-light: hsl(var(--hue-danger), 25%, 15%);
        --color-warning: hsl(var(--hue-warning), 80%, 55%);
        --color-warning-light: hsl(var(--hue-warning), 25%, 15%);
        --color-success: hsl(var(--hue-accent), 65%, 55%);
        --color-success-light: hsl(var(--hue-accent), 25%, 14%);
        
        --color-bg-base: hsl(var(--hue-primary), 25%, 10%);
        --color-bg-surface: hsl(var(--hue-primary), 20%, 13%);
        --color-bg-border: hsl(var(--hue-primary), 15%, 20%);
        
        --color-text-main: hsl(var(--hue-primary), 15%, 90%);
        --color-text-muted: hsl(var(--hue-primary), 10%, 70%);
        
        --color-focus: hsl(var(--hue-primary), 90%, 65%);
        
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    }
}