/* ============================================================
   AVENUE BELMONT — DESIGN SYSTEM
   Identité visuelle officielle
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;400;500;600;700&display=swap');

:root {

  /* ── Couleurs principales ── */
  --color-primary:       #290B0B;   /* Bordeaux très sombre */
  --color-primary-mid:   #51161F;   /* Bordeaux */
  --color-primary-light: #7a2030;   /* Bordeaux clair */
  --color-secondary:     #C7C7C7;   /* Gris clair */
  --color-secondary-dark:#9a9a9a;   /* Gris moyen */

  /* ── Neutres ── */
  --color-black:         #0d0d0d;
  --color-white:         #ffffff;
  --color-off-white:     #f9f7f7;   /* Blanc légèrement chaud */
  --color-cream:         #f3eeee;   /* Crème avec teinte bordeaux */
  --color-grey-100:      #f5f5f5;
  --color-grey-200:      #e8e8e8;
  --color-grey-400:      #C7C7C7;
  --color-grey-600:      #777777;
  --color-grey-800:      #333333;

  /* ── Alias sémantiques ── */
  --color-accent:        var(--color-primary-mid);
  --color-accent-hover:  var(--color-primary);
  --color-border:        #e0d8d8;   /* Bordure avec légère teinte chaleureuse */
  --color-border-dark:   #c4b8b8;
  --color-text:          #1a1a1a;
  --color-text-muted:    #777777;
  --color-bg:            var(--color-white);
  --color-bg-alt:        var(--color-off-white);

  /* ── Typographie ── */
  --font-heading: 'Red Rose', 'Georgia', serif;
  --font-body:    'Hauora', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  2rem;       /* 32px */
  --text-4xl:  2.75rem;    /* 44px */
  --text-5xl:  3.5rem;     /* 56px */
  --text-6xl:  4.5rem;     /* 72px */
  --text-7xl:  6rem;       /* 96px */

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

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:   -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.2em;

  /* ── Espacement ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* ── Layout ── */
  --container-max:    1280px;
  --container-wide:   1520px;
  --container-narrow: 720px;
  --container-px:     clamp(1.25rem, 5vw, 3rem);

  /* ── Bordures ── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Ombres ── */
  --shadow-sm:  0 1px 4px rgba(41,11,11,0.06);
  --shadow-md:  0 4px 20px rgba(41,11,11,0.08);
  --shadow-lg:  0 12px 40px rgba(41,11,11,0.12);
  --shadow-xl:  0 24px 60px rgba(41,11,11,0.16);

  /* ── Transitions minimalistes ── */
  --transition-fast:  180ms ease;
  --transition-base:  280ms ease;
  --transition-slow:  420ms ease;

  /* ── Z-index ── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
}