/* =========================================================
   RYADESIGN — Design Tokens Starter Kit (gratuit)
   Une base de design tokens prête à l'emploi pour démarrer
   un design system propre. Copie ce fichier, adapte les
   valeurs primitives à ta marque, et ne référence QUE les
   tokens sémantiques dans tes composants.
   Guide : https://rya.design/blog/design-tokens-guide
   © RYADESIGN — réutilisation libre, mention appréciée.
   ========================================================= */

:root {
  /* ---------- 1. PRIMITIFS (la matière brute, jamais utilisée directement) ---------- */
  --c-ink-900: #0E0E0F;
  --c-ink-700: #2A2A2D;
  --c-ink-500: #555;
  --c-grey-400: #8A857A;
  --c-cream-100: #F2EFE6;
  --c-paper-50: #FDFBF5;
  --c-white: #FFFFFF;
  --c-accent-500: #FF5B22;
  --c-accent-600: #D8431A;
  --c-success-500: #22C55E;
  --c-warning-500: #F59E0B;
  --c-error-500: #EF4444;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 18px; --radius-pill: 99px;

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --fs-caption: .8rem; --fs-body: 1rem; --fs-h3: 1.5rem;
  --fs-h2: clamp(2rem, 5vw, 3rem); --fs-h1: clamp(3rem, 8vw, 6rem);
  --lh-tight: 1.05; --lh-body: 1.6;

  --shadow-sm: 0 1px 3px rgba(14,14,15,.08);
  --shadow-md: 0 8px 24px rgba(14,14,15,.10);

  /* ---------- 2. SÉMANTIQUES (à utiliser dans les composants) ---------- */
  --color-bg: var(--c-cream-100);
  --color-surface: var(--c-paper-50);
  --color-text: var(--c-ink-900);
  --color-text-muted: var(--c-grey-400);
  --color-accent: var(--c-accent-500);
  --color-accent-hover: var(--c-accent-600);
  --color-border: rgba(14,14,15,.10);
  --color-success: var(--c-success-500);
  --color-warning: var(--c-warning-500);
  --color-error: var(--c-error-500);
}

/* ---------- 3. DARK MODE : on réassigne SEULEMENT les sémantiques ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--c-ink-900);
    --color-surface: #1A1A1B;
    --color-text: var(--c-cream-100);
    --color-text-muted: #9A958A;
    --color-border: rgba(242,239,230,.12);
    /* --color-accent reste identique : l'orange marche sur les deux fonds */
  }
}

/* ---------- Exemple d'usage (un composant ne connaît que le sens) ---------- */
.btn-primary {
  background: var(--color-accent);
  color: var(--c-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
}
.btn-primary:hover { background: var(--color-accent-hover); }