/* ==================================================
   LOCAL STUDIO FONTS: FUTURA CONDENSED & HELVETICA NEUE
   ================================================== */

@font-face {
    font-family: 'Futura Condensed';
    src: url('../fonts/FuturaStdCondensedExtraBd.otf') format('opentype');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueThin.otf') format('opentype');
    font-weight: 100 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueRoman.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueMedium.otf') format('opentype');
    font-weight: 500 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue';
    src: url('../fonts/HelveticaNeueBold.otf') format('opentype');
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Color Scheme Flag */
    color-scheme: light dark;
    --theme-mode: light;

    /* Brand Primitives (Unchanging) */
    --primitive-black: #0C0C0D;
    --primitive-white: #FFFFFF;
    --primitive-green: #48A736;
    --primitive-dark-green: #116B32;

    /* Brand Active Color Palette (Light Theme Defaults) */
    --green: #48A736;
    --dark-green: #116B32;
    --cream: #FFFDF5;
    --black: #0C0C0D;
    --black-soft: #1E1F21;
    --gray-dark: #2A2A2A;
    --gray-medium: #6E6E73;
    --gray-light: #AEAEB2;
    --gray-bg: #F8F8F7;
    --white: #FFFFFF;

    /* Hello Monday Signature Card Tint Variations */
    --tint-cream: #FFFCF3;
    --tint-stone: #F3F2F0;
    --tint-slate: #E5E5EB;
    --tint-sky: #CFEDFD;
    --tint-sand: #F7F5F0;
    --tint-lavender: #ECE9F7;
    --tint-mint: #E8F4EC;
    --tint-dark: #0C0C0D;

    /* Semantic Surface & Foreground Tokens */
    --color-primary: var(--black);
    --color-accent: var(--green);
    --color-bg: #FFFFFF;
    --color-bg-alt: #F8F8F7;
    --color-text: #0C0C0D;
    --color-text-soft: #1E1F21;
    --color-text-muted: #6E6E73;
    --color-card-bg: #FFFFFF;
    --color-card-border: rgba(0, 0, 0, 0.08);
    --color-border: rgba(0, 0, 0, 0.08);

    /* Floating Navigation Tokens (Transparent) */
    --color-nav-bg: transparent;
    --color-nav-scrolled: transparent;
    --color-nav-border: transparent;
    --color-nav-overlay: rgba(255, 255, 255, 0.98);

    /* Subtle Interactive Tokens */
    --color-pill-bg: rgba(0, 0, 0, 0.035);
    --color-pill-border: rgba(0, 0, 0, 0.07);
    --color-hover-bg: rgba(0, 0, 0, 0.04);

    /* Inverted Banners & Highlights */
    --color-banner-bg: #0C0C0D;
    --color-banner-text: #FFFFFF;
    --color-banner-border: rgba(0, 0, 0, 0.1);

    /* Studio Footer Tokens */
    --color-footer-bg: #0C0C0D;
    --color-footer-text: #FFFFFF;
    --color-footer-border: rgba(255, 255, 255, 0.08);

    /* Hairlines & Borders (Refined, minimal editorial strokes) */
    --border-hairline: 1px solid rgba(0, 0, 0, 0.07);
    --border-subtle: 1px solid rgba(0, 0, 0, 0.12);
    --border-clean: 1px solid rgba(0, 0, 0, 0.2);
    --border-dark: 1px solid rgba(255, 255, 255, 0.12);
    
    /* Legacy aliases for backward compatibility */
    --border-width: 1px;
    --border-thick: 1.5px;
    --border-hero: 2px;
    --border: var(--border-hairline);
    --border-bold: var(--border-subtle);
    --border-heavy: 1px solid var(--black);

    /* Hello Monday Airy Shadows & Elevations */
    --shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.03);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 20px 48px -12px rgba(0, 0, 0, 0.1);
    --shadow-floating: 0 16px 40px -8px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 30px 60px -15px rgba(0, 0, 0, 0.18);
    
    /* Legacy aliases mapped to clean elevations */
    --shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow: var(--shadow-card);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.06);
    --shadow-lg: var(--shadow-hover);
    --shadow-xl: var(--shadow-modal);
    --shadow-green: 0 8px 24px rgba(25, 139, 68, 0.18);

    /* Border Radii (Fluid modern agency curves) */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --radius-pill: 9999px;
    --radius-btn: 9999px;
    --radius-badge: 9999px;
    --radius-navbar: 9999px;
    --radius-card: 16px;

    /* Primary Typography: Futura Condensed for Main Titles, Helvetica Neue for other text */
    --font-title: 'Futura Condensed', 'Arial Narrow', sans-serif;
    --font-heading: 'Futura Condensed', 'Arial Narrow', sans-serif;
    --font-serif: 'Futura Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: 'Helvetica Neue', 'SFMono-Regular', Consolas, monospace;

    /* Type Scales */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.84rem;    /* 13.5px */
    --text-base: 0.98rem;  /* 15.7px */
    --text-lg: 1.15rem;    /* 18.4px */
    --text-xl: 1.45rem;    /* 23.2px */
    --text-2xl: 1.95rem;   /* 31.2px */
    --text-3xl: 2.65rem;   /* 42.4px */
    --text-4xl: 3.5rem;    /* 56px */
    --text-5xl: 4.8rem;    /* 76.8px */
    --text-hero: clamp(2.8rem, 6.5vw + 0.8rem, 6.5rem);

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Container */
    --container-max: 1560px;
    --container-padding: clamp(1.25rem, 4.5vw, 3.5rem);

    /* Transitions & Physics */
    --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    --transition: 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==================================================
   AUTO CSS DARK THEME (BASED ON USER'S OS PREFERENCE)
   ================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --theme-mode: dark;

        /* Brand Colors: Vibrant & calibrated for dark luminosity */
        --green: #4FD339;
        --dark-green: #3AC727;
        --cream: #1C1B17;
        --black: #F4F4F6;
        --black-soft: #E5E5EA;
        --gray-dark: #D4D4D8;
        --gray-medium: #8E8E93;
        --gray-light: #48484E;
        --gray-bg: #121215;
        --white: #17171B;

        /* Hello Monday Signature Card Tint Variations (Velvety Dark Editorial) */
        --tint-cream: #1C1B17;
        --tint-stone: #1A1A1D;
        --tint-slate: #1D1E24;
        --tint-sky: #12212B;
        --tint-sand: #1E1C18;
        --tint-lavender: #1C1A27;
        --tint-mint: #132418;
        --tint-dark: #0C0C0E;

        /* Semantic Surface & Foreground Tokens */
        --color-primary: #F4F4F6;
        --color-accent: var(--green);
        --color-bg: #0C0C0E;
        --color-bg-alt: #121215;
        --color-text: #F4F4F6;
        --color-text-soft: #E5E5EA;
        --color-text-muted: #8E8E93;
        --color-card-bg: #17171B;
        --color-card-border: rgba(255, 255, 255, 0.09);
        --color-border: rgba(255, 255, 255, 0.09);

        /* Floating Navigation Tokens (Transparent) */
        --color-nav-bg: transparent;
        --color-nav-scrolled: transparent;
        --color-nav-border: transparent;
        --color-nav-overlay: rgba(12, 12, 14, 0.98);

        /* Subtle Interactive Tokens */
        --color-pill-bg: rgba(255, 255, 255, 0.06);
        --color-pill-border: rgba(255, 255, 255, 0.1);
        --color-hover-bg: rgba(255, 255, 255, 0.08);

        /* Inverted Banners & Highlights */
        --color-banner-bg: #141418;
        --color-banner-text: #F4F4F6;
        --color-banner-border: rgba(255, 255, 255, 0.12);

        /* Studio Footer Tokens */
        --color-footer-bg: #08080A;
        --color-footer-text: #F4F4F6;
        --color-footer-border: rgba(255, 255, 255, 0.08);

        /* Hairlines & Borders */
        --border-hairline: 1px solid rgba(255, 255, 255, 0.08);
        --border-subtle: 1px solid rgba(255, 255, 255, 0.14);
        --border-clean: 1px solid rgba(255, 255, 255, 0.22);
        --border-dark: 1px solid rgba(255, 255, 255, 0.16);
        --border-heavy: 1px solid rgba(255, 255, 255, 0.25);
        --border: var(--border-hairline);
        --border-bold: var(--border-subtle);

        /* Shadows in Dark Theme */
        --shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.35);
        --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
        --shadow-hover: 0 20px 48px -12px rgba(0, 0, 0, 0.65);
        --shadow-floating: 0 16px 40px -8px rgba(0, 0, 0, 0.55);
        --shadow-modal: 0 30px 60px -15px rgba(0, 0, 0, 0.75);
        --shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
        --shadow: var(--shadow-card);
        --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
        --shadow-lg: var(--shadow-hover);
        --shadow-xl: var(--shadow-modal);
        --shadow-green: 0 8px 24px rgba(79, 211, 57, 0.25);
    }
}

/* Explicit data-theme="dark" attribute support */
[data-theme="dark"] {
    --theme-mode: dark;

    /* Brand Colors */
    --green: #4FD339;
    --dark-green: #3AC727;
    --cream: #1C1B17;
    --black: #F4F4F6;
    --black-soft: #E5E5EA;
    --gray-dark: #D4D4D8;
    --gray-medium: #8E8E93;
    --gray-light: #48484E;
    --gray-bg: #121215;
    --white: #17171B;

    /* Hello Monday Signature Card Tint Variations */
    --tint-cream: #1C1B17;
    --tint-stone: #1A1A1D;
    --tint-slate: #1D1E24;
    --tint-sky: #12212B;
    --tint-sand: #1E1C18;
    --tint-lavender: #1C1A27;
    --tint-mint: #132418;
    --tint-dark: #0C0C0E;

    /* Semantic Surface & Foreground Tokens */
    --color-primary: #F4F4F6;
    --color-accent: var(--green);
    --color-bg: #0C0C0E;
    --color-bg-alt: #121215;
    --color-text: #F4F4F6;
    --color-text-soft: #E5E5EA;
    --color-text-muted: #8E8E93;
    --color-card-bg: #17171B;
    --color-card-border: rgba(255, 255, 255, 0.09);
    --color-border: rgba(255, 255, 255, 0.09);

    /* Floating Navigation Tokens (Transparent) */
    --color-nav-bg: transparent;
    --color-nav-scrolled: transparent;
    --color-nav-border: transparent;
    --color-nav-overlay: rgba(12, 12, 14, 0.98);

    /* Subtle Interactive Tokens */
    --color-pill-bg: rgba(255, 255, 255, 0.06);
    --color-pill-border: rgba(255, 255, 255, 0.1);
    --color-hover-bg: rgba(255, 255, 255, 0.08);

    /* Inverted Banners & Highlights */
    --color-banner-bg: #141418;
    --color-banner-text: #F4F4F6;
    --color-banner-border: rgba(255, 255, 255, 0.12);

    /* Studio Footer Tokens */
    --color-footer-bg: #08080A;
    --color-footer-text: #F4F4F6;
    --color-footer-border: rgba(255, 255, 255, 0.08);

    /* Hairlines & Borders */
    --border-hairline: 1px solid rgba(255, 255, 255, 0.08);
    --border-subtle: 1px solid rgba(255, 255, 255, 0.14);
    --border-clean: 1px solid rgba(255, 255, 255, 0.22);
    --border-dark: 1px solid rgba(255, 255, 255, 0.16);
    --border-heavy: 1px solid rgba(255, 255, 255, 0.25);
    --border: var(--border-hairline);
    --border-bold: var(--border-subtle);

    /* Shadows */
    --shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 20px 48px -12px rgba(0, 0, 0, 0.65);
    --shadow-floating: 0 16px 40px -8px rgba(0, 0, 0, 0.55);
    --shadow-modal: 0 30px 60px -15px rgba(0, 0, 0, 0.75);
    --shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow: var(--shadow-card);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: var(--shadow-hover);
    --shadow-xl: var(--shadow-modal);
    --shadow-green: 0 8px 24px rgba(79, 211, 57, 0.25);
}

/* Explicit data-theme="light" attribute support */
[data-theme="light"] {
    --theme-mode: light;

    --green: #48A736;
    --dark-green: #116B32;
    --cream: #FFFDF5;
    --black: #0C0C0D;
    --black-soft: #1E1F21;
    --gray-dark: #2A2A2A;
    --gray-medium: #6E6E73;
    --gray-light: #AEAEB2;
    --gray-bg: #F8F8F7;
    --white: #FFFFFF;

    --tint-cream: #FFFCF3;
    --tint-stone: #F3F2F0;
    --tint-slate: #E5E5EB;
    --tint-sky: #CFEDFD;
    --tint-sand: #F7F5F0;
    --tint-lavender: #ECE9F7;
    --tint-mint: #E8F4EC;
    --tint-dark: #0C0C0D;

    --color-primary: #0C0C0D;
    --color-accent: var(--green);
    --color-bg: #FFFFFF;
    --color-bg-alt: #F8F8F7;
    --color-text: #0C0C0D;
    --color-text-soft: #1E1F21;
    --color-text-muted: #6E6E73;
    --color-card-bg: #FFFFFF;
    --color-card-border: rgba(0, 0, 0, 0.08);
    --color-border: rgba(0, 0, 0, 0.08);

    --color-nav-bg: transparent;
    --color-nav-scrolled: transparent;
    --color-nav-border: transparent;
    --color-nav-overlay: rgba(255, 255, 255, 0.98);

    --color-pill-bg: rgba(0, 0, 0, 0.035);
    --color-pill-border: rgba(0, 0, 0, 0.07);
    --color-hover-bg: rgba(0, 0, 0, 0.04);

    --color-banner-bg: #0C0C0D;
    --color-banner-text: #FFFFFF;
    --color-banner-border: rgba(0, 0, 0, 0.1);

    --color-footer-bg: #0C0C0D;
    --color-footer-text: #FFFFFF;
    --color-footer-border: rgba(255, 255, 255, 0.08);

    --border-hairline: 1px solid rgba(0, 0, 0, 0.07);
    --border-subtle: 1px solid rgba(0, 0, 0, 0.12);
    --border-clean: 1px solid rgba(0, 0, 0, 0.2);
    --border-dark: 1px solid rgba(255, 255, 255, 0.12);
    --border-heavy: 1px solid #0C0C0D;
    --border: var(--border-hairline);
    --border-bold: var(--border-subtle);

    --shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.03);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 20px 48px -12px rgba(0, 0, 0, 0.1);
    --shadow-floating: 0 16px 40px -8px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 30px 60px -15px rgba(0, 0, 0, 0.18);
    --shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow: var(--shadow-card);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.06);
    --shadow-lg: var(--shadow-hover);
    --shadow-xl: var(--shadow-modal);
    --shadow-green: 0 8px 24px rgba(25, 139, 68, 0.18);
}