/**
 * Design Tokens - Thibierge Notaires
 * Source: Figma design specs
 */

:root {
    /* Couleurs primaires */
    --color-primary: #092e50;
    --color-primary-dark: #092e50;
    --color-primary-light: #222f30;
    --color-accent: #ffb601;
    --color-teal: #0199a4;

    /* Couleurs de texte */
    --color-text-dark: #222f30;
    --color-text-body: #72777b;
    --color-text-muted: #72777b;
    --color-text-light: #a0a0a0;
    --color-text-white: #ffffff;

    /* Couleurs de fond */
    --color-bg-white: #ffffff;
    --color-bg-light: #f5f5f5;
    --color-bg-dark: #092e50;

    /* Couleurs de bordure */
    --color-border: #d8d8d8;
    --color-border-dark: #72777b;

    /* Typographie - Familles */
    --font-magnetik: 'Magnetik', 'Helvetica Neue', Arial, sans-serif;
    --font-geometos: 'Geometos Neue', 'Helvetica Neue', Arial, sans-serif;
    --font-bodoni: 'Bodoni Moda', 'Times New Roman', serif;
    --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Typographie - Tailles */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 15px;
    --text-md: 18px;
    --text-lg: 24px;
    --text-xl: 36px;
    --text-2xl: 48px;
    --text-3xl: 60px;
    --text-hero: 81.37px;

    /* Line heights */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.67;

    /* Espacements */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Largeurs de conteneur */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
    --container-max: 1588px;

    /* Marges du conteneur */
    --gutter-mobile: 20px;
    --gutter-tablet: 40px;
    --gutter-desktop: 60px;

    /* Border radius */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;

    /* Z-index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
}