/* =============================================================
   BLOC LÉOPARDS — DIASPORA REGISTRATION SITE
   theme.css — CSS Custom Properties (Design Tokens)
   ============================================================= */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-bg:          #0a0f1e;
  --color-surface:     rgba(255, 255, 255, 0.07);
  --color-surface-md:  rgba(255, 255, 255, 0.10);
  --color-border:      rgba(255, 255, 255, 0.12);
  --color-border-md:   rgba(255, 255, 255, 0.20);

  --color-gold:        #FFCD00;
  --color-gold-dark:   #d4a900;
  --color-gold-dim:    rgba(255, 205, 0, 0.15);

  --color-blue:        #003087;
  --color-blue-light:  #0044b8;

  --color-red:         #CE1126;
  --color-red-light:   #e8192e;

  --color-white:       #FFFFFF;
  --color-muted:       rgba(255, 255, 255, 0.55);
  --color-muted-sm:    rgba(255, 255, 255, 0.35);

  --color-error:       #ff4d4d;
  --color-error-bg:    rgba(255, 77, 77, 0.10);
  --color-success:     #4dff91;
  --color-success-bg:  rgba(77, 255, 145, 0.10);

  --color-info-bg:     rgba(255, 205, 0, 0.08);
  --color-info-border: rgba(255, 205, 0, 0.30);

  --color-overlay:     rgba(0, 0, 0, 0.65);
  --color-nav-solid:   rgba(10, 15, 30, 0.96);

  --color-input-bg:    rgba(255, 255, 255, 0.05);
  --color-input-hover: rgba(255, 255, 255, 0.08);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Barlow Condensed', 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', 'IBM Plex Sans', sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3.5rem;     /* 56px */
  --text-5xl:  5rem;       /* 80px */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.15em;

  /* ── Shape ──────────────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-card:  12px;
  --radius-lg:    16px;
  --radius-full:  9999px;

  --radius-input: var(--radius-md);
  --radius-btn:   var(--radius-md);

  /* ── Effects ─────────────────────────────────────────────── */
  --blur-glass:   blur(16px);
  --blur-sm:      blur(8px);

  --shadow-card:  0 8px 32px rgba(0, 0, 0, 0.40);
  --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-btn:   0 4px 16px rgba(255, 205, 0, 0.25);
  --shadow-input: inset 0 1px 3px rgba(0, 0, 0, 0.20);

  /* ── Spacing ─────────────────────────────────────────────── */
  --spacing-2xs: 2px;
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  48px;
  --spacing-2xl: 80px;
  --spacing-3xl: 120px;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:       1200px;
  --max-width-form:  560px;
  --max-width-text:  720px;

  --nav-height:      72px;
  --nav-height-sm:   60px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-index Scale ───────────────────────────────────────── */
  --z-video:    0;
  --z-overlay:  1;
  --z-content:  2;
  --z-sticky:  10;
  --z-modal:  100;
}

/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}