/* ==========================================================================
   VARIABLES.CSS — Design tokens Le Kontinan
   Dérivés du logo : noir profond, motif mudcloth indigo, flamme orange/rouge
   ========================================================================== */

:root {
  /* Couleurs de base */
  --black: #0b0b0c;
  --charcoal: #151517;
  --charcoal-light: #1e1f22;
  --indigo: #1c2b6b;
  --indigo-light: #2a3d8f;
  --ember: #e8611d;
  --ember-dark: #c94a0f;
  --flame-red: #b31e1e;
  --cream: #f3eee3;
  --cream-dim: #cfc9ba;
  --stone: #8c8880;
  --gold: #d9a441;

  /* Rôles sémantiques */
  --color-bg: var(--black);
  --color-bg-alt: var(--charcoal);
  --color-text: var(--cream);
  --color-text-muted: var(--stone);
  --color-primary: var(--ember);
  --color-primary-hover: var(--ember-dark);
  --color-secondary: var(--indigo);
  --color-accent: var(--gold);
  --color-border: rgba(243, 238, 227, 0.12);

  /* Typographie */
  --font-display: 'Anton', sans-serif;
  --font-label: 'Bebas Neue', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-brush: 'Permanent Marker', cursive;

  /* Échelle typographique */
  --fs-hero: clamp(3rem, 8vw, 6.5rem);
  --fs-h2: clamp(2rem, 4.5vw, 3.25rem);
  --fs-h3: clamp(1.35rem, 2.5vw, 1.75rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.85rem;

  /* Espacements */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 7rem;

  /* Layout */
  --max-width: 1240px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* Ombres */
  --shadow-card: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --shadow-ember-glow: 0 0 60px -10px rgba(232, 97, 29, 0.35);
}

/* Ajouts — surfaces claires/indigo pour un vrai color-blocking façon logo */
:root {
  --ink: #1a1712; /* texte foncé sur fond clair */
  --ink-muted: #6b665c;
  --border-on-light: rgba(11, 11, 12, 0.14);
  --border-on-indigo: rgba(243, 238, 227, 0.22);
}
