/* 
 * Prolific Research - Light-Theme Design System Variables & Tokens
 * Core Palette: Navy (#0B1A30), Cyan (#0082C8), Lime Green (#8DC63F), Orange (#F58220)
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Color Tokens (HSL) */
    --color-navy-h: 215;
    --color-navy-s: 63%;
    --color-navy-l: 12%;
    --color-navy: hsl(var(--color-navy-h), var(--color-navy-s), var(--color-navy-l)); /* #0B1A30 */
    --color-navy-light: hsl(var(--color-navy-h), var(--color-navy-s), 22%);
    --color-navy-dark: hsl(var(--color-navy-h), var(--color-navy-s), 8%);

    --color-cyan-h: 201;
    --color-cyan-s: 100%;
    --color-cyan-l: 39%;
    --color-cyan: hsl(var(--color-cyan-h), var(--color-cyan-s), var(--color-cyan-l)); /* #0082C8 */
    --color-cyan-glow: rgba(0, 130, 200, 0.08);

    --color-green-h: 84;
    --color-green-s: 55%;
    --color-green-l: 51%;
    --color-green: hsl(var(--color-green-h), var(--color-green-s), var(--color-green-l)); /* #8DC63F */
    --color-green-glow: rgba(141, 198, 63, 0.08);

    --color-orange-h: 28;
    --color-orange-s: 92%;
    --color-orange-l: 54%;
    --color-orange: hsl(var(--color-orange-h), var(--color-orange-s), var(--color-orange-l)); /* #F58220 */
    --color-orange-glow: rgba(245, 130, 32, 0.08);

    /* Light Theme Neutral Tokens */
    --bg-primary: #ffffff;
    --color-white: #ffffff;
    --bg-secondary: #f8fafc; /* premium light slate */
    --bg-tertiary: #f1f5f9;  /* card highlight background */
    
    --text-primary: #0b1a30;   /* deep corporate navy from logo */
    --text-secondary: #334155; /* dark slate body */
    --text-muted: #64748b;     /* muted text */
    
    --border-color: #e2e8f0;   /* slate-200 dividers */
    --border-light: rgba(11, 26, 48, 0.06);

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

    /* Shadows & Effects */
    --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.03), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.04), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
    --shadow-glow-cyan: 0 8px 30px var(--color-cyan-glow);
    --shadow-glow-green: 0 8px 30px var(--color-green-glow);

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Animations & Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}