/* ============================================
   HUNTO — DESIGN TOKENS
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* ===== COULEURS ===== */

  /* Primary — Violet électrique signature */
  --color-primary: #7C3AED;
  --color-primary-hover: #6D28D9;
  --color-primary-dim: #5B21B6;
  --color-primary-glow: #A78BFA;
  --color-primary-10: rgba(124, 58, 237, 0.1);
  --color-primary-20: rgba(124, 58, 237, 0.2);
  --color-primary-30: rgba(124, 58, 237, 0.3);
  --color-primary-40: rgba(124, 58, 237, 0.4);

  /* Backgrounds */
  --color-bg: #0A0A0A;              /* Noir charbon, jamais #000 */
  --color-bg-elevated: #161616;     /* Sections surélevées */
  --color-bg-card: #1F1F1F;         /* Cards sur fond elevated */
  --color-bg-card-hover: #262626;

  /* Texte */
  --color-text: #FAFAFA;            /* Blanc cassé, jamais #FFF */
  --color-text-muted: #A3A3A3;
  --color-text-dim: #525252;

  /* Accents */
  --color-success: #84CC16;         /* Vert acide */
  --color-success-10: rgba(132, 204, 22, 0.1);
  --color-warning: #FB923C;         /* Orange feu */
  --color-warning-10: rgba(251, 146, 60, 0.1);
  --color-danger: #EF4444;          /* Rouge */
  --color-danger-10: rgba(239, 68, 68, 0.1);

  /* Bordures */
  --color-border: #262626;
  --color-border-hover: #404040;
  --color-border-bright: rgba(250, 250, 250, 0.1);

  /* ===== TYPOGRAPHIE ===== */

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', monospace;
  --font-display: 'Space Grotesk', var(--font-sans);

  /* Tailles */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 2rem;       /* 32px */
  --text-4xl: 2.5rem;     /* 40px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.5rem;     /* 56px */
  --text-7xl: 4.5rem;     /* 72px */

  /* Line heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* Letter spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* ===== ESPACEMENT (échelle 8px) ===== */

  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-32: 8rem;       /* 128px */

  /* ===== LAYOUT ===== */

  --container-max: 1200px;
  --container-narrow: 800px;
  --container-padding: var(--space-6);

  /* ===== BORDER RADIUS ===== */

  --radius-sm: 0.5rem;    /* 8px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ===== OMBRES ===== */

  --shadow-glow-primary: 0 0 40px rgba(124, 58, 237, 0.4);
  --shadow-glow-primary-lg: 0 0 80px rgba(124, 58, 237, 0.5);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);

  /* ===== TRANSITIONS ===== */

  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 400ms ease-out;

  /* ===== Z-INDEX ===== */

  --z-nav: 50;
  --z-modal: 100;
  --z-toast: 200;
}