@use 'space' as *;
@use 'media-queries' as *;

// ============================================================
// Design Tokens
// ------------------------------------------------------------
// Base minimale, à personnaliser par projet.
// Ne pas renommer les variables : la grille et les utilities
// s'appuient dessus (surtout --space-gap).
// ============================================================

$radius-sm: 0.25rem;

:root {
  // -- Couleurs de base --
  // Fixes (ne changent jamais, même en dark mode)
  --c-white: #f5f5f5;
  --c-black: #0d0f12;
  --c-surface: #ffffff;
  --c-border: #e0e0e0;

  // Neutres
  --c-gray-100: #f5f5f5;
  --c-gray-200: #d4d4d4;
  --c-gray-300: #a3a3a3;
  --c-gray-400: #525252;
  --c-gray-500: #262626;

  // Accent (à remplacer par la couleur de marque)
  --c-primary: #1247B2;

  // -- Texte & fond --
  --c-text: var(--c-black);
  --c-bg: #f8f8f8;

  // -- Espacements (générés depuis $spaces) --
  @each $name, $value in $spaces {
    --space-#{$name}: #{$value};
  }

  // Gutter global (utilisé par col-width() + tous les containers)
  // Ne jamais pointer vers une variable inexistante : les calc() casseraient.
  --space-gap: var(--space-md);

  @include md {
    --space-gap: 1.2rem;
  }
}

// ============================================================
// Thème sombre (optionnel — applique .is-dark sur un container)
// ============================================================

.is-dark {
  --c-text: var(--c-white);
  --c-bg: var(--c-black);
}

.is-gray {
  background: var(--c-gray-100);
}
