/* ========================================
   DESIGN TOKENS
   ======================================== */
:root {
    /* Colors */
    --color-black: #000;
    --color-white: #fff;
    --color-gray-900: #1f1f1f;
    --color-gray-800: #222;
    --color-gray-700: #333;
    --color-gray-600: #3b3b3b;
    --color-gray-500: #666;
    --color-gray-400: #878787;
    --color-gray-300: #c1c1c1;
    --color-gray-200: #c9c9c9;
    --color-gray-100: #d9d9d9;
    --color-gray-50: #e0e0e0;

    --color-green: #51a44e;
    --color-success: var(--color-green);

    /* Text colors */
    --color-text: var(--color-gray-600);          /* #3b3b3b — default body text */
    --color-text-strong: var(--color-black);      /* #000 — headings, emphasis */
    --color-text-secondary: rgba(0, 0, 0, 0.66);
    --color-text-muted: var(--color-gray-500);

    /* Border colors */
    --color-border: rgba(0, 0, 0, 0.15);
    --color-border-light: rgba(0, 0, 0, 0.1);

    /* Brand colors */
    --color-brand-blue: #0082f3;
    --color-linkedin: #0a66c2;

    /* Case study color pairs (light = background, dark = interaction/button) */
    --color-case-integration-light: rgba(107, 104, 190, 0.361);
    --color-case-integration-dark: #6B68BE;
    --color-case-dc-light: #f5d0da;
    --color-case-dc-dark: #460A23;
    --color-case-renault-light: #ffe68b;
    --color-case-renault-dark: var(--color-gray-600);
    --color-case-ttc-light: rgba(113, 174, 55, 0.55);
    --color-case-ttc-dark: #04820A;
    --color-case-amadeus-light: #0c66e169;
    --color-case-amadeus-dark: #1A3573;
    --color-case-orpi-light: rgba(198, 198, 198, 0.96);
    --color-case-orpi-dark: #576070;
    --color-case-michelin-light: rgba(193, 214, 209, 0.87);
    --color-case-michelin-dark: #576070;

    /* Legacy case colors (source, maas — not yet migrated) */
    --color-cs-source: #c1d6d1de;
    --color-cs-maas: #d9d9c7de;
    --color-btn-source: #FD7307;
    --color-btn-maas: #58147B;

    /* Background colors */
    --color-bg-light: rgba(209, 207, 207, 0.12);
    --color-bg-overlay: rgba(0, 0, 0, 0.9);

    /* Tag colors */
    --color-tag-ai-bg: #e8f4fd;
    --color-tag-ai-text: rgba(26, 115, 232, 0.5);
    --color-tag-claude-bg: #fce8e6;
    --color-tag-claude-text: rgba(217, 48, 37, 0.5);
    --color-tag-design-bg: #e6f4ea;
    --color-tag-design-text: rgba(30, 142, 62, 0.5);

    /* Typography */
    --font-primary: Lato, Arial, sans-serif;
    --font-secondary: Rosarivo, serif;

    --font-size-xs: 11px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 22px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-4-5xl: 34px;
    --font-size-5xl: 36px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 100%;
    --line-height-snug: 120%;
    --line-height-normal: 140%;
    --line-height-relaxed: 150%;
    --line-height-loose: 170%;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 40px;
    --space-7: 48px;
    --space-8: 56px;
    --space-9: 64px;
    --space-10: 72px;

    /* Layout widths — generic scale, usable as max-width or min-width */
    --layout-xs: 480px;   /* layout/xs */
    --layout-sm: 768px;   /* layout/sm */
    --layout-md: 1024px;  /* layout/md */
    --layout-lg: 1280px;  /* layout/lg */
    --header-height: 64px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;

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

    /* Z-index */
    --z-header: 1000;
    --z-hamburger: 1001;
    --z-overlay: 1100;
    --z-mobile-menu: 1200;
    --z-lightbox: 2000;
    --z-video: 10000;
}