/* ============================================
   DESIGN TOKENS — Site Photobooth JJLR Films
   ============================================ */

:root {
  /* --- Couleurs principales --- */
  --color-bg:            #0b0b0f;
  --color-bg-alt:        #131318;
  --color-bg-card:       #1a1a22;
  --color-bg-card-hover: #22222c;
  --color-surface:       #252530;

  /* --- Accent : or chaud (premium / evenementiel) --- */
  --color-accent:        #c9a84c;
  --color-accent-hover:  #dabb65;
  --color-accent-subtle: rgba(201, 168, 76, 0.12);
  --color-accent-glow:   rgba(201, 168, 76, 0.25);

  /* --- Texte --- */
  --color-text:          #f0ece4;
  --color-text-secondary:#a8a4a0;
  --color-text-muted:    #6b6866;
  --color-text-on-accent:#0b0b0f;

  /* --- Bordures --- */
  --color-border:        rgba(255, 255, 255, 0.06);
  --color-border-hover:  rgba(255, 255, 255, 0.12);
  --color-border-accent: rgba(201, 168, 76, 0.3);

  /* --- Etats --- */
  --color-success:       #4ade80;
  --color-error:         #f87171;
  --color-warning:       #fbbf24;

  /* --- Typographies --- */
  --font-heading:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Tailles de texte --- */
  --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:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  /* --- Font weights --- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- Espacements --- */
  --space-xs:   0.25rem;    /* 4px */
  --space-sm:   0.5rem;     /* 8px */
  --space-md:   1rem;       /* 16px */
  --space-lg:   1.5rem;     /* 24px */
  --space-xl:   2rem;       /* 32px */
  --space-2xl:  3rem;       /* 48px */
  --space-3xl:  4rem;       /* 64px */
  --space-4xl:  6rem;       /* 96px */
  --space-5xl:  8rem;       /* 128px */

  /* --- Layout --- */
  --container-max:   1200px;
  --container-narrow: 800px;
  --header-height:   80px;

  /* --- Bordures arrondies --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* --- Ombres --- */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-glow:  0 0 30px var(--color-accent-glow);

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