/* ==========================================================================
   Creativ3D97 — Design tokens (charte extraite de la boutique SumUp)
   Logo : triangle orange #FF4500 + texte noir. Titres Russo One, labels/boutons
   Archivo Black, texte Open Sans. Esthétique : noir / blanc / orange, angles vifs.
   ========================================================================== */
:root {
  /* Couleurs de marque */
  --c-orange: #ff4500;
  --c-orange-dark: #d93a00;
  --c-orange-light: #ff6a2b;
  --c-orange-tint: #fff1eb;
  --c-black: #0a0a0a;
  --c-ink: #141414;
  --c-ink-2: #3a3a3a;
  --c-ink-3: #6b6b6b;
  --c-line: #e6e6e6;
  --c-line-strong: #cfcfcf;
  --c-surface: #ffffff;
  --c-surface-2: #f5f5f5;
  --c-surface-3: #ededed;
  --c-danger: #b50e18;
  --c-success: #1f8a4c;

  /* Rôles */
  --bg: var(--c-surface);
  --bg-alt: var(--c-surface-2);
  --fg: var(--c-ink);
  --fg-muted: var(--c-ink-3);
  --accent: var(--c-orange);
  --accent-contrast: #ffffff;
  --line: var(--c-line);

  /* Typo */
  --font-display: 'Russo One', 'Archivo Black', Impact, system-ui, sans-serif;
  --font-label: 'Archivo Black', 'Russo One', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Échelle fluide (mobile-first) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --fs-hero: clamp(2.25rem, 1.5rem + 5vw, 5rem);
  --lh-tight: 1.1;
  --lh-body: 1.6;

  /* Espacement */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --gutter: 1rem;              /* marge latérale mobile (16px) */
  --container: 1200px;
  --section-y: clamp(2.5rem, 2rem + 4vw, 5rem);

  /* Formes */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);

  /* Interface */
  --header-h: 64px;
  --tap: 44px;                  /* taille minimale des zones tactiles */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 150ms;
  --t-med: 260ms;
  --z-header: 50;
  --z-drawer: 90;
  --z-toast: 100;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; --header-h: 76px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 2rem; }
}