/*
 * Edifore — tokens.css
 *
 * Variables CSS sémantiques portables. Chaque token décrit un *rôle*, pas une
 * couleur. Les fichiers theme-*.css assignent les valeurs réelles selon le
 * thème actif (data-theme="<slug>"). Slugs supportés : voir app.py
 * _THEMES_VALIDES (14 thèmes : 4 Edifore + 10 inspirés Nord/Solarized/
 * Dracula/Catppuccin/Gruvbox/Monokai).
 *
 * Survit au refactor React : ces tokens seront consommés par les composants
 * React via les mêmes var(--*) côté CSS, ou via une CSS-in-JS abstraction
 * qui pointe vers les vars.
 *
 * Slider luminosité : --luminosity-shift est un delta L OKLCH (−30..+30) qui
 * s'applique aux tokens construits via oklch(). Cf. theming-plan.md §2.C.
 *
 * Spec : edifore/docs/theming-plan.md.
 */

:root {
  /* ============================================================
   * Slider luminosité (override par utilisateur, plage −30..+30)
   * ============================================================ */
  --luminosity-shift: 0;

  /* ============================================================
   * Espacements & rayons (non-thématiques mais standardisés)
   * ============================================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ============================================================
   * Transitions
   * ============================================================ */
  --transition-fast: 0.12s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;

  /* ============================================================
   * Z-index hiérarchie
   * ============================================================ */
  --z-base: 1;
  --z-elevated: 10;
  --z-overlay: 50;
  --z-modal: 100;
  --z-toast: 200;

  /* ============================================================
   * Typography
   * ============================================================ */
  --font-sans: Arial, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Consolas", "Monaco", "Courier New", monospace;

  --text-size-xs: 11px;
  --text-size-sm: 13px;
  --text-size-base: 14px;
  --text-size-md: 15px;
  --text-size-lg: 18px;
  --text-size-xl: 22px;
  --text-size-2xl: 26px;

  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-loose: 1.7;
}

/*
 * Les tokens *colorés* sont définis par les thèmes (theme-*.css) sous le
 * sélecteur [data-theme="..."]. Cf. theme-clair.css pour le défaut.
 *
 * Référence des tokens utilisés par les thèmes :
 *
 *  Surfaces        : --bg-page, --bg-card, --bg-elevated, --bg-input,
 *                    --bg-overlay
 *  Texte           : --text-primary, --text-secondary, --text-muted,
 *                    --text-on-accent
 *  Accents         : --accent-primary, --accent-primary-hover,
 *                    --accent-primary-soft, --accent-primary-fg
 *  Bordures        : --border-default, --border-strong, --border-focus
 *  Status          : --status-success-bg/-fg, --status-warning-bg/-fg,
 *                    --status-danger-bg/-fg, --status-info-bg/-fg
 *  Ombres          : --shadow-card, --shadow-elevated, --shadow-modal,
 *                    --shadow-color (pour rgba composé)
 *  Composants      : --header-bg, --header-fg, --header-fg-muted,
 *                    --filigrane-opacity, --filigrane-asset
 */