/**
 * CSS Variables - Design System
 * Single source of truth for all design tokens
 * Extract magic numbers to variables for maintainability
 */

:root {
    /* Color Palette */
    --color-light-grey: #2e2e2e;
    --color-dark-grey: #1a1a1a;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-primary: #5d8fb3;
    --color-primary-light: #89CFF0;
    --color-primary-dark: #4a7a9a;
    --color-secondary: #89CFF0;
    --color-hover: #555;

    /* Typography Colors - Hierarchy for Glass Morphism */
    --color-text-title: #ffffff;
    /* Pure white for section titles - maximum contrast */
    --color-text-body: rgba(255, 255, 255, 0.88);
    /* Slightly grey body text - reduces eye strain */
    --color-text-secondary: rgba(255, 255, 255, 0.75);
    /* Secondary text - subtitles, metadata */
    --color-text-muted: rgba(255, 255, 255, 0.6);
    /* Muted text - captions, hints */

    /* Sophisticated Color System - Functional & Meaningful */
    /* Core Principle: Limited hues, semantic meaning, unified system/status tags */

    /* System/Status Tags - Unified Content Type Color */
    /* All content types (publication, talk, paper) use the same professional identity */
    --color-content-type: #30476E;
    /* Dark, rich, muted blue - unified professional identity */
    --color-content-type-light: #7A9FC2;
    /* Lighter variant for text on dark backgrounds - improved contrast */
    --color-content-type-bg: rgba(48, 71, 110, 0.25);
    /* Background for tags - slightly increased opacity */
    --color-content-type-border: rgba(48, 71, 110, 0.5);
    /* Border for tags - increased for better definition */

    /* Primary Accent - CTA/Opportunity Tags */
    --color-accent-primary: #5299B7;
    /* Desaturated, mature light blue/cyan - for CTAs/opportunities */
    --color-accent-primary-light: #8FC4E0;
    /* Lighter variant for text on dark backgrounds - improved contrast */
    --color-accent-primary-dark: #3A7B99;
    /* Darker variant for depth */
    --color-accent-primary-bg: rgba(82, 153, 183, 0.25);
    --color-accent-primary-border: rgba(82, 153, 183, 0.5);

    /* Semantic Status Colors */
    --color-status-ongoing: #4F8A8B;
    /* Muted deep teal - active/ongoing status */
    --color-status-ongoing-light: #6BA8A9;
    /* Lighter for text */
    --color-status-ongoing-bg: rgba(79, 138, 139, 0.2);
    --color-status-ongoing-border: rgba(79, 138, 139, 0.4);

    --color-status-completed: #6B7B8B;
    /* Medium-dark cool gray - archived/finished */
    --color-status-completed-light: #8A9AAB;
    /* Lighter for text */
    --color-status-completed-bg: rgba(107, 123, 139, 0.2);
    --color-status-completed-border: rgba(107, 123, 139, 0.4);

    /* Research Theme Colors - Vibrant Palette for Visual Impact */
    --color-theme-1: #4FC3F7;
    /* Bright Cyan - stands out beautifully */
    --color-theme-1-light: #81D4FA;

    --color-theme-2: #26C6DA;
    /* Vibrant Teal - energetic and modern */
    --color-theme-2-light: #4DD0E1;

    --color-theme-3: #AB47BC;
    /* Rich Purple - creative and bold */
    --color-theme-3-light: #CE93D8;

    --color-theme-4: #FF7043;
    /* Warm Coral/Orange - inviting and dynamic */
    --color-theme-4-light: #FFAB91;

    /* Legacy aliases for backward compatibility */
    --color-accent-blue: var(--color-accent-primary);
    --color-accent-blue-light: var(--color-accent-primary-light);
    --color-accent-blue-dark: var(--color-accent-primary-dark);
    --color-accent-secondary: var(--color-content-type);
    --color-accent-secondary-light: var(--color-content-type-light);
    --color-success: var(--color-status-completed);
    --color-success-text: var(--color-status-completed-light);
    --color-success-light: var(--color-status-completed-bg);
    --color-warning: var(--color-status-ongoing);
    --color-warning-text: var(--color-status-ongoing-light);
    --color-warning-light: var(--color-status-ongoing-bg);
    --color-info: var(--color-accent-primary);
    --color-info-text: var(--color-accent-primary-light);
    --color-info-light: var(--color-accent-primary-bg);
    --color-utility-1: var(--color-theme-3);
    --color-utility-1-light: var(--color-theme-3-light);
    --color-utility-2: var(--color-theme-4);
    --color-utility-2-light: var(--color-theme-4-light);
    /* Font Families - Different fonts for different purposes */
    --font-family-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
    --font-family: var(--font-family-body);
    /* Default to body font */

    /* Glass Effect Variables - Blur */
    --glass-blur-light: 10px;
    --glass-blur-base: 20px;
    --glass-blur-heavy: 30px;
    --glass-blur-intro: 25px;
    /* Used in intro-container */
    --glass-blur-timeline: 25px;
    /* Used in timeline */
    --glass-blur-gallery: 25px;
    /* Used in gallery */
    --glass-blur-footer: 20px;
    /* Used in footer */
    --glass-blur-docs: 8px;
    /* Used in docs - reduced for image visibility */
    --glass-blur-docs-content: 0px;
    /* Used in doc-content overlay - minimal blur */
    --glass-blur-search: 12px;
    /* Used in search overlay */
    --glass-blur-overlay: 16px;
    /* Used in expanded overlay */
    --glass-blur-card: 30px;
    /* Used in expanded card */

    /* Glass Effect Variables - Saturation */
    --glass-saturation-light: 150%;
    --glass-saturation-base: 180%;
    --glass-saturation-heavy: 200%;
    --glass-saturation-intro: 180%;
    /* Used in intro-container */
    --glass-saturation-timeline: 180%;
    /* Used in timeline */
    --glass-saturation-gallery: 180%;
    /* Used in gallery */
    --glass-saturation-footer: 180%;
    /* Used in footer */
    --glass-saturation-docs: 180%;
    /* Used in docs */
    --glass-saturation-search: 160%;
    /* Used in search overlay */
    --glass-saturation-overlay: 100%;
    /* Used in expanded overlay */
    --glass-saturation-card: 180%;
    /* Used in expanded card */

    /* Glass Effect Variables - Opacity */
    --glass-border-opacity: 0.18;
    --glass-border-opacity-hover: 0.25;
    --glass-bg-opacity-base: 0.15;
    --glass-bg-opacity-light: 0.1;
    --glass-bg-opacity-heavy: 0.25;
    --glass-highlight-opacity: 0.7;
    --glass-highlight-opacity-hover: 1;
    --glass-illumination-opacity: 0.6;
    --glass-illumination-opacity-hover: 0.9;

    /* Glass Colors - Primary (RGB: 93, 143, 179) */
    --glass-primary-rgb: 93, 143, 179;
    --glass-primary: rgba(93, 143, 179, var(--glass-bg-opacity-base));

    /* Glass Colors - Secondary (RGB: 137, 207, 240) */
    --glass-secondary-rgb: 137, 207, 240;
    --glass-secondary: rgba(137, 207, 240, 0.08);

    /* Glass Colors - Accent (RGB: 46, 46, 46) */
    --glass-accent-rgb: 46, 46, 46;
    --glass-accent: rgba(46, 46, 46, 0.15);

    /* Glass Colors - Highlight */
    --glass-highlight: rgba(255, 255, 255, var(--glass-highlight-opacity));
    --glass-border: rgba(255, 255, 255, var(--glass-border-opacity));

    /* Dynamic Lighting */
    --glass-light-x: 50%;
    --glass-light-y: 0%;

    /* Dark Mode Glass Variables */
    --glass-dark-bg-opacity-base: 0.2;
    --glass-dark-border-opacity: 0.2;

    /* Border Radius - Centralized control for all rounded corners */
    --radius-xs: 16px;
    /* Small elements: badges, inline code */
    --radius-sm: 24px;
    /* Small containers: buttons, inputs */
    --radius-base: 32px;
    /* Default container radius */
    --radius-badge: 24px;
    /* Badges and small tags */
    --radius-md: 40px;
    /* Medium containers: cards, news items */
    --radius-lg: 48px;
    /* Large containers: intro, gallery */
    --radius-xl: 56px;
    /* Extra large: theme blocks, timeline */
    --radius-2xl: 64px;
    /* Maximum: overlays, expanded cards */

    /* Legacy aliases for backward compatibility */
    --radius-small: var(--radius-base);
    --radius-medium: var(--radius-lg);
    --radius-large: var(--radius-xl);

    /* Spacing */
    --spacing-xs: 0.25em;
    --spacing-sm: 0.5em;
    --spacing-md: 1em;
    --spacing-lg: 1.5em;
    --spacing-xl: 2em;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(93, 143, 179, 0.15);
    --shadow-lg: 0 8px 32px rgba(93, 143, 179, 0.15);
    --shadow-xl: 0 12px 40px rgba(93, 143, 179, 0.25);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
}