/* ============================================
   THEMES.CSS — Charte graphique Aarel Digital
   Dark luxury · Or · Blanc cassé
   ============================================ */

:root {
  /* Couleurs principales */
  --color-bg:           #080808;
  --color-bg-alt:       #0f0f0f;
  --color-surface:      #111111;
  --color-surface-alt:  #161616;
  --color-surface-hover:#1c1c1c;

  /* Or — couleur signature */
  --color-gold:         #C9A84C;
  --color-gold-light:   #E8D08A;
  --color-gold-dark:    #8B6914;
  --color-gold-subtle:  rgba(201, 168, 76, 0.12);
  --color-gold-border:  rgba(201, 168, 76, 0.20);
  --color-gold-glow:    rgba(201, 168, 76, 0.06);

  /* Texte */
  --color-text:         #F5F5F0;
  --color-text-muted:   #888880;
  --color-text-faint:   #444440;
  --color-text-inverse: #080808;

  /* Bordures */
  --color-border:       rgba(255, 255, 255, 0.06);
  --color-border-gold:  rgba(201, 168, 76, 0.20);

  /* Typographie */
  --font-heading: 'ClashDisplay', 'Clash Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;

  /* Tailles */
  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   2rem;
  --fs-3xl:   2.75rem;
  --fs-4xl:   3.5rem;
  --fs-5xl:   4.5rem;
  --fs-6xl:   6rem;
  --fs-7xl:   8rem;

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

  /* Bordures-rayon */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* Transitions */
  --t-fast:   150ms ease;
  --t-base:   280ms ease;
  --t-slow:   500ms ease;
  --t-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-max:    1320px;
  --container-narrow: 800px;
  --nav-height:       72px;

  /* Ombres */
  --shadow-gold: 0 0 40px rgba(201, 168, 76, 0.15);
  --shadow-gold-sm: 0 0 20px rgba(201, 168, 76, 0.10);
  --shadow-card: 0 1px 1px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 4px 24px rgba(0,0,0,0.6), 0 0 40px rgba(201,168,76,0.08);
}