/**
 * Ayinù Créa - Design Tokens (tokens.css)
 * Direction artistique : Cotonou, Bénin
 * Couleurs issues des concepts culturels (terre d'ocre, pulpe de karité, laiton, kaolin)
 */

:root {
  /* --- PALETTE DE COULEURS PRIMAIRES --- */
  --color-prune-profond: #2A0E2A;
  --color-prune-tempere: #4A3B4A;
  --color-prune-surface: #361736;
  --color-prune-border: rgba(247, 243, 236, 0.14);
  --color-prune-border-subtle: rgba(247, 243, 236, 0.08);

  --color-blanc-kaolin: #F7F3EC;
  --color-kaolin-surface: #EFE9DF;
  --color-kaolin-border: rgba(42, 14, 42, 0.12);
  --color-noir-profond: #0F0A0F;

  --color-violet-royal: #5B2A86;
  --color-orange-chaud: #F97316;
  --color-rose-magenta: #D63384;
  --color-or-precieux: #D4A24C;
  --color-bleu-accent: #2563EB;

  /* --- ATTRIBUTION SÉMANTIQUE (MODE SOMBRE PAR DÉFAUT) --- */
  --bg-primary: var(--color-prune-profond);
  --bg-surface: var(--color-prune-surface);
  --bg-surface-elevated: #3E1B3E;
  --text-primary: var(--color-blanc-kaolin);
  --text-secondary: #C8BAC8;
  --text-muted: #A595A5;
  --border-subtle: var(--color-prune-border-subtle);
  --border-default: var(--color-prune-border);
  --border-gold: rgba(212, 162, 76, 0.5);

  --accent-primary: var(--color-orange-chaud);
  --accent-secondary: var(--color-rose-magenta);
  --accent-gold: var(--color-or-precieux);
  --accent-brand: var(--color-violet-royal);

  /* --- TYPOGRAPHIE --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-signature: 'Caveat', cursive;

  /* Hiérarchie typographique exacte */
  --text-hero: clamp(2.8rem, 7vw, 5rem);
  --text-section: clamp(1.8rem, 4vw, 2.8rem);
  --text-subtitle: 1.2rem;
  --text-body: 1rem;
  --text-small: 0.85rem;
  --text-label: 0.72rem;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-spaced: 0.12em;

  /* --- SPATIAL & GRILLE (12 colonnes, marges & gouttières) --- */
  --grid-columns: 12;
  --gutter-desktop: 24px;
  --gutter-mobile: 16px;
  --page-margin-desktop: 48px;
  --page-margin-mobile: 16px;
  --max-content-width: 1320px;

  /* Respirations verticales (au moins 96px sur PC, 64px sur mobile) */
  --section-spacing-desktop: 112px;
  --section-spacing-mobile: 68px;
  --block-spacing: 36px;
  --element-spacing: 20px;

  /* Rayons discrets (2px à 4px max, zéro bulle ronde) */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;

  /* Transitions mesurées (cubic-bezier(0.16, 1, 0.3, 1), 400ms max) */
  --transition-bezier: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-hover: 180ms;
  --duration-reveal: 400ms;

  /* Ombres strictement mesurées (ou bordures fines sans flottement) */
  --shadow-discrete: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* --- THEME CLAIR ALTERNATIF (ACTIVABLE VIA INTERRUPTEUR EN PIED DE PAGE) --- */
[data-theme="light"] {
  --bg-primary: var(--color-blanc-kaolin);
  --bg-surface: var(--color-kaolin-surface);
  --bg-surface-elevated: #E5DFD4;
  --text-primary: var(--color-noir-profond);
  --text-secondary: var(--color-prune-tempere);
  --text-muted: #6E5C6E;
  --border-subtle: rgba(42, 14, 42, 0.08);
  --border-default: var(--color-kaolin-border);
  --border-gold: rgba(212, 162, 76, 0.6);
}