/* ============================================
   Design Tokens
   Two-hue palette: Indigo + Teal
   Warm stone neutrals
   ============================================ */

:root {

    /* ===========================
       COLORS
       =========================== */

    /* Primary: Indigo */
    --color-primary: #4338ca;
    --color-primary-light: #6366f1;
    --color-primary-dark: #312e81;
    --color-primary-bg: rgba(67, 56, 202, 0.06);

    /* Secondary: Teal */
    --color-secondary: #0d9488;
    --color-secondary-light: #14b8a6;
    --color-secondary-dark: #0f766e;

    /* Accent: Violet */
    --color-accent: #7c3aed;

    /* Neutrals: Warm stone */
    --color-bg: #fafaf9;
    --color-bg-alt: #f5f5f4;
    --color-bg-dark: #0c0a09;
    --color-surface: #ffffff;
    --color-border: rgba(0, 0, 0, 0.06);
    --color-border-strong: rgba(0, 0, 0, 0.12);

    /* Glass */
    --color-glass: rgba(255, 255, 255, 0.6);
    --color-glass-strong: rgba(255, 255, 255, 0.8);
    --color-glass-border: rgba(255, 255, 255, 0.5);

    /* Text */
    --color-text: #0c0a09;
    --color-text-secondary: #1c1917;
    --color-text-muted: #57534e;
    --color-text-light: #a8a29e;
    --color-text-inverse: #fafaf9;

    /* Status */
    --color-success: #10b981;

    /* Era colors (timeline accents) */
    --era-foundation: #78716c;
    --era-bigdata: #0d9488;
    --era-deeplearning: #6366f1;
    --era-genai: #7c3aed;


    /* ===========================
       GRADIENTS
       =========================== */

    --gradient-primary: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
    --gradient-secondary: linear-gradient(135deg, #0d9488 0%, #06b6d4 100%);
    --gradient-text: linear-gradient(135deg, #4338ca, #0d9488);
    --gradient-hero: linear-gradient(180deg, #eef2ff 0%, var(--color-bg) 100%);
    --gradient-mesh:
        radial-gradient(at 40% 20%, rgba(67, 56, 202, 0.10) 0, transparent 50%),
        radial-gradient(at 80% 0%, rgba(13, 148, 136, 0.07) 0, transparent 50%),
        radial-gradient(at 0% 50%, rgba(124, 58, 237, 0.06) 0, transparent 50%);


    /* ===========================
       TYPOGRAPHY
       =========================== */

    --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Modular type scale (1.25 ratio) with clamp() */
    --text-xs:   clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
    --text-sm:   clamp(0.85rem, 0.80rem + 0.25vw, 0.9rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    --text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --text-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --text-3xl:  clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
    --text-4xl:  clamp(2.5rem, 2rem + 2.5vw, 4rem);


    /* ===========================
       SPACING (8px base)
       =========================== */

    --space-2xs: 0.125rem;  /*  2px */
    --space-xs:  0.25rem;   /*  4px */
    --space-sm:  0.5rem;    /*  8px */
    --space-md:  1rem;      /* 16px */
    --space-lg:  1.5rem;    /* 24px */
    --space-xl:  2rem;      /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */
    --space-4xl: 6rem;      /* 96px */
    --space-5xl: 8rem;      /* 128px */


    /* ===========================
       RADII
       =========================== */

    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;


    /* ===========================
       SHADOWS
       =========================== */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.12);


    /* ===========================
       TRANSITIONS
       =========================== */

    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);


    /* ===========================
       LAYOUT
       =========================== */

    --container-max:    1140px;
    --container-narrow: 780px;
    --nav-height:       64px;


    /* ===========================
       Z-INDEX SCALE
       =========================== */

    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
}