/* === DESIGN TOKENS === */
:root {
    /* ── Colors ── */
    --color-bg-primary: #F5F0EB;
    --color-bg-projects: linear-gradient(180deg, #B1E9FF 0%, #18210E 100%);
    --color-bg-about: #ffffff;
    --color-bg-contacts: #0a0a0f;

    --color-text-primary: #3A3A45;
    --color-text-secondary: #61616A;
    --color-text-light: #D6E5F1;
    --color-text-white: #ffffff;
    --color-text-muted: #9999a1;
    --color-text-muted-light: #E0E0E5;
    --color-black: #000000;

    --color-accent: #294BFF;
    --color-accent-hover: #1a3ad4;
    --color-accent-highlight: #6B77F4;


    --color-dark-card: #3A3A45;
    --color-dark-card-hover: #4a4a55;

    --color-tag-bg: rgba(255, 255, 255, 0.15);
    --color-tag-text: #61616A;

    --color-exp-1-start: #294BFF;
    --color-exp-1-end: #6B8CFF;
    --color-exp-2-start: #FF6B6B;
    --color-exp-2-end: #FFB347;
    --color-exp-3-start: #4ECDC4;
    --color-exp-3-end: #44CF6C;

    --color-placeholder-warm-start: #ff6b6b;
    --color-placeholder-warm-end: #ffa07a;
    --color-placeholder-dark-start: #2d2d3a;
    --color-placeholder-dark-end: #5a5a7a;

    /* Fullscreen Experience Slide Backgrounds */
    --color-exp-slide-1: #233DF2;
    /* Vibrant blue for MISTO */
    --color-exp-slide-2: #000000;
    --color-exp-slide-2-accent: #8A44EE;
    /* Black for Brainstack */
    --color-exp-slide-3: #FDFCFF;
    --color-exp-slide-3-accent: #076258;
    /* Light theme for Latifundist */

    --color-success: #22c55e;
    --color-card-stack-bg: #D2DEEd;

    --color-hero-grad-start: #99ABD9;
    --color-hero-grad-mid: #CCD5EC;
    --color-hero-grad-end: #FFFFFF;

    --color-case-study-hero: #6b7cff;

    /* ── Typography ── */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

    --text-h1: clamp(2rem, 4vw, 3.5rem);
    --text-h2: clamp(1.5rem, 3vw, 2.5rem);
    --text-h3: clamp(1.2rem, 2vw, 1.75rem);
    --text-body: clamp(0.938rem, 1.2vw, 1.125rem);
    --text-small: clamp(0.75rem, 1vw, 0.875rem);
    --text-tag: 0.75rem;
    --text-nav: 0.875rem;

    /* ── Spacing ── */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-section: clamp(5rem, 10vw, 8rem);
    --space-card-padding: 30px;

    /* ── Layout ── */
    --max-width: 1200px;
    --content-padding: clamp(1.5rem, 4vw, 4rem);

    /* ── Borders ── */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 9999px;

    /* ── Shadows ── */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 16px 48px rgba(0, 0, 0, 0.14);
    --shadow-nav: 0 4px 24px rgba(0, 0, 0, 0.06);

    /* ── Animations ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 600ms;
    --duration-reveal: 800ms;

}