/* ============================================================
   CHRYS BERNARD — variables.css
   Couleurs, typographie, espacements globaux
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Montserrat:wght@200;300;400;500&display=swap');

:root {

  /* ── Couleurs ── */
  --color-black:      #000000;
  --color-dark:       #0a0a0a;
  --color-surface:    #111111;
  --color-surface-2:  #161616;
  --color-border:     rgba(255, 255, 255, 0.08);
  --color-border-mid: rgba(255, 255, 255, 0.15);

  --color-white:      #ffffff;
  --color-offwhite:   #e8e4de;
  --color-muted:      rgba(255, 255, 255, 0.42);
  --color-subtle:     rgba(255, 255, 255, 0.2);

  --color-gold:       #c9a84c;
  --color-gold-dim:   rgba(201, 168, 76, 0.18);

  /* ── Typographie ── */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Montserrat', Helvetica, Arial, sans-serif;

  --size-xs:   0.58rem;   /* labels, tags, meta */
  --size-sm:   0.72rem;   /* corps secondaire   */
  --size-base: 0.88rem;   /* corps principal    */
  --size-lg:   1.1rem;
  --size-xl:   1.4rem;

  --tracking-wide:  0.25em;
  --tracking-wider: 0.38em;
  --tracking-max:   0.5em;

  /* ── Espacements ── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-2xl: 9rem;

  /* ── Transitions ── */
  --transition-fast:   0.25s ease;
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:   0.8s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ── */
  --max-width:       1100px;
  --nav-height:      72px;
}