:root {
    --space-xs:  clamp(4px,  0.8vw,  8px);
    --space-sm:  clamp(10px, 1.5vw, 16px);
    --space-md:  clamp(16px, 2.5vw, 24px);
    --space-lg:  clamp(32px, 4.5vw, 56px);
    --space-xl:  clamp(60px, 9vw,  120px);
    --space-2xl: clamp(80px, 14vw, 200px);

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    --color-white: #ffffff;
    --color-black: #000000;

    --font-main: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* background */

    --color-bg: #F7F5F2;
    --color-bg-alt: var(--color-warm-gray);

    /* text */

    --color-text: var(--color-taupe);
    --color-text-muted: var(--color-warm-gray);

    /* borders */

    --color-border: var(--color-warm-gray);

    /* brand */

    --color-primary: var(--color-gold);
    --color-primary-hover: #c6a05f;

    /* accent */

    --color-accent: var(--color-taupe);
    --color-accent-hover: #5c5647;

    /* UI */

    --color-button: var(--color-primary);
    --color-button-hover: var(--color-primary-hover);

    --color-link: var(--color-taupe);
    --color-link-hover: var(--color-gold);

    /* header */

    --color-header-bg: var(--color-bg);
    --color-header-border: var(--color-border);

    /* font weights */

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

    /* font sizes */

    --text-xs:   clamp(0.65rem,  1.5vw, 0.75rem);
    --text-sm:   clamp(0.75rem,  2vw,   0.875rem);
    --text-base: clamp(0.875rem, 2.2vw, 1rem);
    --text-lg:   clamp(1rem,     2.5vw, 1.125rem);
    --text-xl:   clamp(1.1rem,   2.8vw, 1.25rem);

    /* headings */

    --h1: clamp(2rem, 4vw, 3rem);
    --h2: clamp(1.6rem, 3vw, 2.2rem);
    --h3: clamp(1.2rem, 2vw, 1.6rem);
    --h4: clamp(1rem, 1.8vw, 1.25rem);
}

/*
  ┌─────────────────────────────────────────┐
  │  Breakpoints de référence               │
  │  (non utilisables dans @media)          │
  ├─────────────────────────────────────────┤
  │  Laptop      @media (max-width: 1280px) │
  │  Tablet      @media (max-width: 1024px) │
  │  Mobile LG   @media (max-width: 768px)  │
  │  Mobile      @media (max-width: 640px)  │
  └─────────────────────────────────────────┘
*/