:root {
    /* Typography */
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-heading: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    /* Fluid typography using clamp() for responsive scaling */
    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.813rem);
    --font-size-sm: clamp(0.813rem, 0.8rem + 0.15vw, 0.875rem);
    --font-size-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --font-size-lg: clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
    --font-size-xl: clamp(1.75rem, 1.5rem + 2vw, 2.5rem);
    --font-size-btn: clamp(0.938rem, 0.9rem + 0.2vw, 1rem);

    --h2-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --h3-size: clamp(1.05rem, 1rem + 0.25vw, 1.25rem);
    --h1-size: clamp(1.75rem, 1.5rem + 2vw, 2.5rem);
    --line-height-base: 1.6;
    
    /* Container Sizes */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;



    /* ===========================================
       Color Palette -- Light Mode (default)
       Base: #040404, #5a9fa6, #57b0b9, #79d4e1, #4cacc4
       Black -- Breaker Bay -- Fountain Blue -- Aquamarine Blue -- Pelorous
       Shades sourced from icolorpalette.com
       =========================================== */
    --color-primary: #0564b1;
            /*#4cacc4;*/
    --color-primary-dark: #044d8a;
    --color-primary-light: #a3c8e8;
    --color-secondary: #040404;
    --color-accent: #79d4e1;
    --color-accent-alt: #5a9fa6;
    --color-bg-light: #f7fafb;
    --color-bg-dark: #040404;
    --color-bg-card: #ffffff;
    --color-bg-alt: #eef5f7;
    --color-text-main: #353535;
    --color-text-secondary: #595959;
    --color-text-muted: #8e8e8e;
    --color-text-inverse: #ffffff;
    --color-text-heading: #040404;
    --color-text-accent: #4cacc4;
    --color-border: #c4c4c4;
    --color-border-light: #e0e0e0;
    --color-border-grid: #d5d5d5;

    /* Brand Colors */
    --color-linkedin: #0077b5;
    --color-github: #333333;
    --color-sessionize: #1ab394;
    --color-sessionize-dark: #158f76;
    --color-youtube: #ff0000;
    --color-instagram-gradient: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

    /* Overlays & Transparency Effects */
    --overlay-dark-65: rgba(0, 0, 0, 0.65);
    --overlay-dark-75: rgba(0, 0, 0, 0.75);
    --overlay-dark-30: rgba(0, 0, 0, 0.3);
    --overlay-dark-20: rgba(0, 0, 0, 0.2);
    --overlay-dark-80: rgba(0, 0, 0, 0.8);
    --overlay-white-10: rgba(255, 255, 255, 0.1);
    --overlay-white-15: rgba(255, 255, 255, 0.15);
    --overlay-white-30: rgba(255, 255, 255, 0.3);
    --overlay-white-60: rgba(255, 255, 255, 0.6);
    
    /* Focus & Interaction States */
    --focus-ring-primary: rgba(5, 100, 177, 0.1);
    --focus-ring-primary-medium: rgba(5, 100, 177, 0.2);
    --focus-ring-primary-strong: rgba(5, 100, 177, 0.3);
    --focus-ring-primary-stronger: rgba(5, 100, 177, 0.4);
    --focus-ring-accent: rgba(90, 159, 166, 0.15);
    --focus-ring-accent-medium: rgba(90, 159, 166, 0.25);
    
    /* Status Colors */
    --color-error: #dc3545;
    --color-error-dark: #b02a37;
    --color-error-bg: rgba(220, 53, 69, 0.1);
    --color-success: #28a745;
    --color-success-bg: rgba(40, 167, 69, 0.1);
    --color-warning: #ffc107;

    /* Spacing & Layout - Fluid responsive spacing using clamp() */
    --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --space-sm: clamp(0.5rem, 1vw, 0.75rem);
    --space-md: clamp(0.75rem, 1.25vw, 1rem);
    --space-lg: clamp(1rem, 2vw, 1.5rem);
    --space-xl: clamp(1.5rem, 3vw, 2rem);
    --space-2xl: clamp(2rem, 4vw, 3rem);
    --tile-padding: clamp(1rem, 2vw, 1.5rem);
    --max-width-main: 1200px;
    
    /* Semantic spacing tokens */
    --section-spacing: clamp(1rem, 2vw, 1.5rem);
    --content-gap: clamp(0.5rem, 1vw, 0.75rem);
    --element-gap: clamp(0.25rem, 0.5vw, 0.5rem);

    /* UI Effects */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    
    /* Component-specific sizes */
    --dropdown-min-width: 180px;
    --dropdown-min-width-categories: 200px;
    --social-icon-size: 36px;
    --social-icon-size-tablet: 30px;
    --social-icon-size-small: 20px;
    --social-icon-size-tiny: 16px;
    --about-photo-size: 11rem;
    --about-photo-size-tablet: 9rem;
    --about-photo-size-mobile: 8rem;
    --profile-photo-size: 170px;
    --profile-img-max-width: 200px;
    --profile-img-max-height: 300px;
    --video-thumb-width: 80px;
    --video-thumb-height: 60px;
    --video-placeholder-width: 48px;
    --video-placeholder-height: 36px;
    --post-thumbnail-height: 200px;
    --button-min-height: 2.75rem;
    --pagination-size: 2.75rem;
    --category-count-min-width: 24px;
    --search-input-padding-right: 45px;
    --search-button-right: 8px;
    --section-icon-size: 2.75rem;
    --section-icon-size-mobile: 2.25rem;
    --section-icon-svg-size: 1.25rem;
    --section-icon-svg-size-mobile: 1rem;
    --bento-min-height: 300px;
    --bento-min-height-tablet: 280px;
    --bento-min-height-mobile: 220px;
    --social-media-height: 200px;
    --about-image-banner-height: 18rem;
    --about-image-banner-height-mobile: 10rem;
    --mobile-menu-max-height: 500px;
    --mobile-menu-max-height-github: 300px;
    
    /* Letter spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0.02em;
    --letter-spacing-wide: 0.03em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.08em;
    --letter-spacing-eyebrow: 0.12em;
    
    /* Line heights for compact/heading contexts */
    --line-height-compact: 1.3;
    --line-height-heading: 1.4;

    /* Media aspect ratio (16:9) */
    --aspect-ratio-video: 56.25%;

    /* Featured card icon size */
    --icon-size-featured: 48px;

    /* Image max heights */
    --hero-image-max-height: 350px;
    --single-post-image-max-height: 200px;

    /* Form and button widths */
    --form-max-width: 700px;
    --newsletter-max-width: 500px;
    --btn-min-width: 120px;

    /* Page title font size (max value in responsive clamp) */
    --font-size-page-title: 2.5rem;

    /* Hover shadow for interactive cards and tags */
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Component spacing */
    --video-card-padding: var(--space-md);
    --video-card-gap: var(--space-sm);
    --video-title-margin: 0 0 var(--space-xs);
    --video-metadata-padding: var(--space-sm) var(--space-md) var(--space-md);
    --video-content-padding: var(--space-sm);
    --video-title-padding: 0 var(--video-content-padding) var(--space-xs);
    --video-metadata-padding-horizontal: var(--video-content-padding);
}

/* ===========================================
   Dark Mode
   Toggle via [data-theme="dark"] on <html>,
   or follows system preference automatically.
   Black #040404 as base bg with neutral gray
   surfaces. Fountain Blue #57b0b9 as primary.
   Aquamarine Blue #79d4e1 as accent. Navbar
   uses Breaker Bay #5a9fa6 for visibility.
   =========================================== */
[data-theme="dark"] {
    --color-primary: #57b0b9;
    --color-primary-dark: #5a9fa6;
    --color-primary-light: #2a5a60;
    --color-secondary: #5a9fa6;
    --color-accent: #79d4e1;
    --color-accent-alt: #4cacc4;
    --color-bg-light: #040404;
    --color-bg-dark: #000000;
    --color-bg-card: #1a1a1a;
    --color-bg-alt: #121212;
    --color-text-main: #d0d0d0;
    --color-text-secondary: #a0a0a0;
    --color-text-muted: #6e6e6e;
    --color-text-inverse: #040404;
    --color-text-heading: #f0f0f0;
    --color-text-accent: #79d4e1;
    --color-border: #2e2e2e;
    --color-border-light: #222222;
    --color-border-grid: #2a2a2a;

    --color-github: #f0f0f0;

    --focus-ring-primary: rgba(87, 176, 185, 0.15);
    --focus-ring-primary-medium: rgba(87, 176, 185, 0.25);
    --focus-ring-primary-strong: rgba(87, 176, 185, 0.35);
    --focus-ring-primary-stronger: rgba(87, 176, 185, 0.5);
    --focus-ring-accent: rgba(90, 159, 166, 0.2);
    --focus-ring-accent-medium: rgba(90, 159, 166, 0.3);

    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);

    --color-error: #ff6b7a;
    --color-error-dark: #dc3545;
    --color-error-bg: rgba(255, 107, 122, 0.15);
    --color-success: #4cd964;
    --color-success-bg: rgba(76, 217, 100, 0.15);

    color-scheme: dark;
}

/* System preference: auto dark mode when no explicit theme is set */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary: #57b0b9;
        --color-primary-dark: #5a9fa6;
        --color-primary-light: #2a5a60;
        --color-secondary: #5a9fa6;
        --color-accent: #79d4e1;
        --color-accent-alt: #4cacc4;
        --color-bg-light: #040404;
        --color-bg-dark: #000000;
        --color-bg-card: #1a1a1a;
        --color-bg-alt: #121212;
        --color-text-main: #d0d0d0;
        --color-text-secondary: #a0a0a0;
        --color-text-muted: #6e6e6e;
        --color-text-inverse: #040404;
        --color-text-heading: #f0f0f0;
        --color-text-accent: #79d4e1;
        --color-border: #2e2e2e;
        --color-border-light: #222222;
        --color-border-grid: #2a2a2a;

        --color-github: #f0f0f0;

        --focus-ring-primary: rgba(87, 176, 185, 0.15);
        --focus-ring-primary-medium: rgba(87, 176, 185, 0.25);
        --focus-ring-primary-strong: rgba(87, 176, 185, 0.35);
        --focus-ring-primary-stronger: rgba(87, 176, 185, 0.5);
        --focus-ring-accent: rgba(90, 159, 166, 0.2);
        --focus-ring-accent-medium: rgba(90, 159, 166, 0.3);

        --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.4);
        --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);

        --color-error: #ff6b7a;
        --color-error-dark: #dc3545;
        --color-error-bg: rgba(255, 107, 122, 0.15);
        --color-success: #4cd964;
        --color-success-bg: rgba(76, 217, 100, 0.15);

        color-scheme: dark;
    }
}