/* Modern SaaS Color System & Variables (Notion/Stripe/Linear Inspired) */
/* Note: Google Fonts (Inter + Outfit) loaded via non-blocking <link> in HTML */


:root {
    /* Font Families */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Outfit', var(--font-sans);

    /* Light Theme Palette (Premium Claymorphic LMS Theme) */
    --bg-primary: #f0fdfa;         /* Soft teal tint background */
    --bg-secondary: #ffffff;       /* Contrast card bg */
    --bg-tertiary: #e6f4f1;        /* Rounded hover background */
    
    --text-primary: #111827;       /* Dark charcoal body text */
    --text-secondary: #134e4a;     /* Deep forest teal headings */
    --text-muted: #4b5563;         /* Muted slate text */
    
    --accent-color: #0d9488;       /* Primary Teal */
    --accent-light: #ccfbf1;       /* Light Teal */
    --accent-hover: #0f766e;       /* Deep Teal */
    
    --border-color: #b2f5ea;       /* Minty-teal border */
    --success-color: #10b981;
    --warning-color: #d97706;      /* Amber alert color */
    --danger-color: #ef4444;
    
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;             /* Bubbly clay cards */
    
    --shadow-sm: 0 2px 4px rgba(13, 148, 136, 0.04);
    --shadow-md: 0 8px 16px -4px rgba(13, 148, 136, 0.08), 0 2px 4px -2px rgba(13, 148, 136, 0.03);
    --shadow-lg: 0 16px 24px -6px rgba(13, 148, 136, 0.1), 0 4px 10px -4px rgba(13, 148, 136, 0.05);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    --sidebar-width: 240px;
    --header-height: 64px;
    --header-bg: rgba(255, 255, 255, 0.85);
}

:root[data-theme="dark"] {
    /* Dark Theme Palette (Modern Premium Slate with Teal Accents) */
    --bg-primary: #0f172a;         /* Deep slate background */
    --bg-secondary: #1e293b;       /* Elevated slate card bg */
    --bg-tertiary: #334155;        /* Hover states and tertiary elements */
    
    --text-primary: #f8fafc;       /* Crisp white for main text */
    --text-secondary: #cbd5e1;     /* Soft gray for secondary text */
    --text-muted: #94a3b8;         /* Muted slate for subtle text */
    
    --accent-color: #14b8a6;       /* Vibrant teal for primary actions */
    --accent-light: rgba(20, 184, 166, 0.15);  /* Subtle teal background */
    --accent-hover: #2dd4bf;       /* Brighter teal for hover states */
    
    --border-color: #334155;       /* Subtle border color */
    
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --danger-color: #f87171;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    
    --header-bg: rgba(15, 23, 42, 0.85); /* Translucent slate for sticky header */
}

/* Global resets & typography */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

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

a:hover {
    color: var(--accent-hover);
}