/* ════════════════════════════════════════════════════════════════════════
   KREYOL IA — Design Tokens v1.0.0
   Généré le 2026-05-19 | Style: Modern | Brand: #00D4AA
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Meta ───────────────────────────────────────────────────────────── */
  --kia-version: '1.0.0';
  --kia-style: 'modern';

  /* ── Font Families ──────────────────────────────────────────────────── */
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'Fira Code', Monaco, 'Courier New', monospace;

  /* ── Primary (Teal) ─────────────────────────────────────────────────── */
  --color-primary-50: #a0f2e1;
  --color-primary-100: #96f2e0;
  --color-primary-200: #83f2dc;
  --color-primary-300: #71f2d8;
  --color-primary-400: #5ef2d4;
  --color-primary-500: #00D4AA;
  --color-primary-600: #00aa89;
  --color-primary-700: #008068;
  --color-primary-800: #005545;
  --color-primary-900: #002a21;

  /* ── Secondary (Gold) — Override manuel pour la marque ──────────────── */
  --color-secondary-50: #fef5e0;
  --color-secondary-100: #fcebb8;
  --color-secondary-200: #f9dc82;
  --color-secondary-300: #f5c844;
  --color-secondary-400: #f0b429;
  --color-secondary-500: #F0A500;
  --color-secondary-600: #c48400;
  --color-secondary-700: #936300;
  --color-secondary-800: #624200;
  --color-secondary-900: #312100;

  /* ── Neutral (Gris) ─────────────────────────────────────────────────── */
  --color-neutral-50: #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #111827;

  /* ── Semantic ───────────────────────────────────────────────────────── */
  --color-success-base: #10B981;
  --color-success-light: #34D399;
  --color-success-dark: #059669;
  --color-success-contrast: #FFFFFF;

  --color-warning-base: #F59E0B;
  --color-warning-light: #FBBD24;
  --color-warning-dark: #D97706;
  --color-warning-contrast: #FFFFFF;

  --color-error-base: #EF4444;
  --color-error-light: #F87171;
  --color-error-dark: #DC2626;
  --color-error-contrast: #FFFFFF;

  --color-info-base: #3B82F6;
  --color-info-light: #60A5FA;
  --color-info-dark: #2563EB;
  --color-info-contrast: #FFFFFF;

  /* ── Surface (Dark Theme) ───────────────────────────────────────────── */
  --color-void: #09090F;
  --color-void-deep: #070A0F;
  --color-surface-background: #09090F;
  --color-surface-foreground: #F5F0E8;
  --color-surface-card: #0D1219;
  --color-surface-overlay: rgba(0, 0, 0, 0.72);
  --color-surface-divider: rgba(245, 240, 232, 0.14);
  --color-surface-glass: rgba(15, 15, 28, 0.92);
  --color-cream: #F5F0E8;
  --color-cream-muted: rgba(232, 237, 245, 0.55);
  --color-cream-faded: rgba(232, 237, 245, 0.35);

  /* ── Typography Scale (1.25x Major Third) ───────────────────────────── */
  --font-size-xs: 0.625rem;    /* 10px */
  --font-size-sm: 0.8125rem;   /* 13px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5625rem;   /* 25px */
  --font-size-2xl: 1.9375rem;  /* 31px */
  --font-size-3xl: 2.4375rem;  /* 39px */
  --font-size-4xl: 3.0625rem;  /* 49px */
  --font-size-5xl: 3.8125rem;  /* 61px */

  /* ── Fluid Typography ───────────────────────────────────────────────── */
  --fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem);
  --fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem);
  --fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  --fluid-h4: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  --fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fluid-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);

  /* ── Font Weights ───────────────────────────────────────────────────── */
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ── Line Heights ───────────────────────────────────────────────────── */
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* ── Letter Spacing ─────────────────────────────────────────────────── */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ── Spacing (8pt Grid) ─────────────────────────────────────────────── */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;
  --space-56: 224px;
  --space-64: 256px;

  /* Semantic spacing */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  /* ── Sizing ─────────────────────────────────────────────────────────── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --btn-padding-sm: 12px;
  --btn-padding-md: 16px;
  --btn-padding-lg: 20px;

  --input-height-sm: 32px;
  --input-height-md: 40px;
  --input-height-lg: 48px;

  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* ── Borders ────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  --border-width-none: 0;
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-glow-teal: 0 0 20px rgba(0, 212, 170, 0.3);
  --shadow-glow-gold: 0 0 20px rgba(240, 165, 0, 0.3);

  /* ── Animation ──────────────────────────────────────────────────────── */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;

  --easing-linear: linear;
  --easing-ease: ease;
  --easing-ease-in: ease-in;
  --easing-ease-out: ease-out;
  --easing-ease-in-out: ease-in-out;
  --easing-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --easing-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Breakpoints ────────────────────────────────────────────────────── */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ── Z-Index ────────────────────────────────────────────────────────── */
  --z-hide: -1;
  --z-base: 0;
  --z-announce: 99990;
  --z-overlay: 99998;
  --z-modal: 99999;
  --z-popover: 100000;
  --z-tooltip: 100001;
  --z-notification: 100002;
}

/* ════════════════════════════════════════════════════════════════════════
   UTILITAIRES KREYOL IA
   ════════════════════════════════════════════════════════════════════════ */

/* Text Styles */
.text-h1 {
  font-family: var(--font-serif);
  font-size: var(--fluid-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.text-h2 {
  font-family: var(--font-serif);
  font-size: var(--fluid-h2);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-tight);
}

.text-h3 {
  font-size: var(--fluid-h3);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.text-body {
  font-family: var(--font-sans);
  font-size: var(--fluid-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.text-small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.text-caption {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
}

/* Gradient Utilities */
.gradient-hero {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
}

.gradient-gold {
  background: linear-gradient(135deg, var(--color-secondary-500) 0%, #D4890A 100%);
}

.gradient-dark {
  background: linear-gradient(90deg, var(--color-void-deep) 0%, #0D1219 50%, var(--color-void-deep) 100%);
}

/* Glass Effect */
.glass {
  background: var(--color-surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Glow Effects */
.glow-teal {
  box-shadow: var(--shadow-glow-teal);
}

.glow-gold {
  box-shadow: var(--shadow-glow-gold);
}

/* Container */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

@media (min-width: 640px) {
  .container { max-width: var(--container-sm); }
}
@media (min-width: 768px) {
  .container { max-width: var(--container-md); }
}
@media (min-width: 1024px) {
  .container { max-width: var(--container-lg); }
}
@media (min-width: 1280px) {
  .container { max-width: var(--container-xl); }
}
@media (min-width: 1536px) {
  .container { max-width: var(--container-2xl); }
}