/* ═══════════════════════════════════════════════════════════════════════════
   KODA DESIGN TOKENS V1.0
   ═══════════════════════════════════════════════════════════════════════════
   Hub Educatif Zootechnique Gamifie
   Esthetique: Dark Academia (Cuir, Or vieilli, Textures organiques)

   USAGE: Ce fichier contient TOUTES les variables CSS du projet.
   Ne jamais definir de couleurs/tailles en dur dans les composants.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ══════════════════════════════════════════════════════════════════════════
     PALETTE PRINCIPALE (Dark Academia)
     ══════════════════════════════════════════════════════════════════════════ */

  /* Surfaces & Backgrounds */
  --koda-void: #0a0a0a;
  --koda-panel: #121212;
  --koda-panel-elevated: #1a1a1a;
  --koda-surface: #1e1e1e;
  --koda-surface-hover: #252525;
  --koda-overlay: rgba(10, 10, 10, 0.85);

  /* Texte */
  --koda-text-primary: #f4f1ea;
  --koda-text-secondary: #a89f8d;
  --koda-text-muted: #6b6358;
  --koda-text-disabled: #4a453d;
  --koda-text-inverse: #0a0a0a;

  /* Bordures */
  --koda-border: #2d2a25;
  --koda-border-light: #3d3a35;
  --koda-border-focus: var(--koda-gold);

  /* ══════════════════════════════════════════════════════════════════════════
     ACCENT GLOBAL - OR KODA
     ══════════════════════════════════════════════════════════════════════════ */

  --koda-gold: #d4af37;
  --koda-gold-light: #e5c76b;
  --koda-gold-dark: #b8942f;
  --koda-gold-darker: #9a7b1a;
  --koda-gold-glow: rgba(212, 175, 55, 0.25);
  --koda-gold-subtle: rgba(212, 175, 55, 0.08);
  --koda-gold-border: rgba(212, 175, 55, 0.3);

  /* ══════════════════════════════════════════════════════════════════════════
     COULEURS PAR MONDE (6 Ordres)
     ══════════════════════════════════════════════════════════════════════════ */

  /* TERRA / OUROBOROS - Vert Foret (Reptiles & Amphibiens) */
  --koda-terra-primary: #27ae60;
  --koda-terra-secondary: #2ecc71;
  --koda-terra-dark: #145a32;
  --koda-terra-darker: #0d3d22;
  --koda-terra-light: #58d68d;
  --koda-terra-glow: rgba(39, 174, 96, 0.25);
  --koda-terra-subtle: rgba(39, 174, 96, 0.08);
  --koda-terra-border: rgba(39, 174, 96, 0.3);

  /* AQUA / ABYSSAE - Bleu Profond (Aquariophilie) */
  --koda-aqua-primary: #2980b9;
  --koda-aqua-secondary: #3498db;
  --koda-aqua-dark: #1a5276;
  --koda-aqua-darker: #0e3d5a;
  --koda-aqua-light: #5dade2;
  --koda-aqua-glow: rgba(41, 128, 185, 0.25);
  --koda-aqua-subtle: rgba(41, 128, 185, 0.08);
  --koda-aqua-border: rgba(41, 128, 185, 0.3);

  /* LUPUS - Rouge/Brun Chaleureux (Canins) */
  --koda-lupus-primary: #c0392b;
  --koda-lupus-secondary: #e74c3c;
  --koda-lupus-dark: #922b21;
  --koda-lupus-darker: #6e2018;
  --koda-lupus-warm: #d4a574;
  --koda-lupus-light: #f1948a;
  --koda-lupus-glow: rgba(192, 57, 43, 0.25);
  --koda-lupus-subtle: rgba(192, 57, 43, 0.08);
  --koda-lupus-border: rgba(192, 57, 43, 0.3);

  /* AERIA - Violet Mystique (Oiseaux) */
  --koda-aeria-primary: #8e44ad;
  --koda-aeria-secondary: #9b59b6;
  --koda-aeria-dark: #6c3483;
  --koda-aeria-darker: #512666;
  --koda-aeria-light: #bb8fce;
  --koda-aeria-glow: rgba(142, 68, 173, 0.25);
  --koda-aeria-subtle: rgba(142, 68, 173, 0.08);
  --koda-aeria-border: rgba(142, 68, 173, 0.3);

  /* TANAE - Orange Terre (Mammiferes) */
  --koda-tanae-primary: #d35400;
  --koda-tanae-secondary: #e67e22;
  --koda-tanae-dark: #a04000;
  --koda-tanae-darker: #7d3200;
  --koda-tanae-light: #eb984e;
  --koda-tanae-glow: rgba(211, 84, 0, 0.25);
  --koda-tanae-subtle: rgba(211, 84, 0, 0.08);
  --koda-tanae-border: rgba(211, 84, 0, 0.3);

  /* MYRMEX - Jaune Ambre (Insectes & Invertebres) */
  --koda-myrmex-primary: #f39c12;
  --koda-myrmex-secondary: #f1c40f;
  --koda-myrmex-dark: #b9770e;
  --koda-myrmex-darker: #8a5a0a;
  --koda-myrmex-light: #f7dc6f;
  --koda-myrmex-glow: rgba(243, 156, 18, 0.25);
  --koda-myrmex-subtle: rgba(243, 156, 18, 0.08);
  --koda-myrmex-border: rgba(243, 156, 18, 0.3);

  /* ══════════════════════════════════════════════════════════════════════════
     ETATS & FEEDBACKS SYSTEME
     ══════════════════════════════════════════════════════════════════════════ */

  --koda-success: #27ae60;
  --koda-success-light: #2ecc71;
  --koda-success-dark: #1e8449;
  --koda-success-glow: rgba(39, 174, 96, 0.25);
  --koda-success-subtle: rgba(39, 174, 96, 0.1);

  --koda-warning: #f39c12;
  --koda-warning-light: #f5b041;
  --koda-warning-dark: #d68910;
  --koda-warning-glow: rgba(243, 156, 18, 0.25);
  --koda-warning-subtle: rgba(243, 156, 18, 0.1);

  --koda-danger: #e74c3c;
  --koda-danger-light: #f1948a;
  --koda-danger-dark: #c0392b;
  --koda-danger-glow: rgba(231, 76, 60, 0.25);
  --koda-danger-subtle: rgba(231, 76, 60, 0.1);

  --koda-info: #3498db;
  --koda-info-light: #5dade2;
  --koda-info-dark: #2980b9;
  --koda-info-glow: rgba(52, 152, 219, 0.25);
  --koda-info-subtle: rgba(52, 152, 219, 0.1);

  /* ══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHIE
     ══════════════════════════════════════════════════════════════════════════ */

  /* Familles de polices */
  --font-totem: 'Cinzel Decorative', 'Palatino Linotype', serif;  /* Titres majeurs, Noms d'Ordres */
  --font-rune: 'Cinzel', 'Palatino Linotype', serif;               /* Sous-titres, Labels importants */
  --font-body: 'Cormorant Garamond', Georgia, serif;               /* Corps de texte immersif */
  --font-tech: 'Montserrat', 'Segoe UI', sans-serif;               /* UI, Boutons, Stats */
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;            /* Code, Donnees techniques */

  /* Echelle typographique (rem) */
  --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.75rem;    /* 60px */

  /* Line heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Font weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Letter spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --tracking-display: 0.15em;

  /* ══════════════════════════════════════════════════════════════════════════
     ESPACEMENTS (Grille 4px)
     ══════════════════════════════════════════════════════════════════════════ */

  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* ══════════════════════════════════════════════════════════════════════════
     BORDURES & RAYONS
     ══════════════════════════════════════════════════════════════════════════ */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* Bordures predefinies */
  --border-subtle: 1px solid var(--koda-border);
  --border-light: 1px solid var(--koda-border-light);
  --border-gold: 1px solid var(--koda-gold-border);
  --border-accent: 2px solid var(--koda-gold);
  --border-glass: 1px solid rgba(255, 255, 255, 0.08);
  --border-glow: 1px solid rgba(255, 255, 255, 0.15);

  /* ══════════════════════════════════════════════════════════════════════════
     OMBRES & EFFETS
     ══════════════════════════════════════════════════════════════════════════ */

  /* Ombres standard */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 32px 80px rgba(0, 0, 0, 0.7);

  /* Ombres internes */
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-inner-lg: inset 0 4px 12px rgba(0, 0, 0, 0.4);

  /* Glows */
  --shadow-glow-gold: 0 0 30px var(--koda-gold-glow);
  --shadow-glow-gold-lg: 0 0 50px var(--koda-gold-glow), 0 0 100px rgba(212, 175, 55, 0.15);
  --shadow-glow-terra: 0 0 30px var(--koda-terra-glow);
  --shadow-glow-aqua: 0 0 30px var(--koda-aqua-glow);
  --shadow-glow-lupus: 0 0 30px var(--koda-lupus-glow);
  --shadow-glow-aeria: 0 0 30px var(--koda-aeria-glow);
  --shadow-glow-tanae: 0 0 30px var(--koda-tanae-glow);
  --shadow-glow-myrmex: 0 0 30px var(--koda-myrmex-glow);

  /* Glassmorphism */
  --glass-bg: rgba(18, 18, 18, 0.85);
  --glass-bg-light: rgba(26, 26, 26, 0.75);
  --glass-bg-dark: rgba(10, 10, 10, 0.9);
  --glass-blur: blur(20px);
  --glass-blur-sm: blur(10px);
  --glass-blur-lg: blur(40px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-border-light: 1px solid rgba(255, 255, 255, 0.12);

  /* ══════════════════════════════════════════════════════════════════════════
     TRANSITIONS & ANIMATIONS
     ══════════════════════════════════════════════════════════════════════════ */

  /* Durees */
  --duration-instant: 75ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;
  --duration-slowest: 1000ms;

  /* Easings */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.15, 0.265, 1.15);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Transitions pre-composees */
  --transition-instant: var(--duration-instant) var(--ease-in-out);
  --transition-fast: var(--duration-fast) var(--ease-in-out);
  --transition-base: var(--duration-normal) var(--ease-in-out);
  --transition-slow: var(--duration-slow) var(--ease-in-out);
  --transition-bounce: var(--duration-slow) var(--ease-bounce);
  --transition-elastic: var(--duration-slow) var(--ease-elastic);

  /* ══════════════════════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ══════════════════════════════════════════════════════════════════════════ */

  --z-below: -1;
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;
  --z-max: 9999;

  /* ══════════════════════════════════════════════════════════════════════════
     BREAKPOINTS (Reference - utiliser @media dans le code)
     ══════════════════════════════════════════════════════════════════════════ */

  /*
   * --breakpoint-sm: 640px;   // Mobile large
   * --breakpoint-md: 768px;   // Tablette portrait
   * --breakpoint-lg: 1024px;  // Tablette paysage / Desktop small
   * --breakpoint-xl: 1280px;  // Desktop
   * --breakpoint-2xl: 1536px; // Desktop large
   */

  /* ══════════════════════════════════════════════════════════════════════════
     CONTAINER SIZES
     ══════════════════════════════════════════════════════════════════════════ */

  --container-xs: 320px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-prose: 65ch;

  /* ══════════════════════════════════════════════════════════════════════════
     OPACITES
     ══════════════════════════════════════════════════════════════════════════ */

  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;

  /* ══════════════════════════════════════════════════════════════════════════
     MONDE ACTIF - Variables dynamiques (surchargees par classe body)
     ══════════════════════════════════════════════════════════════════════════ */

  --monde-primary: var(--koda-gold);
  --monde-secondary: var(--koda-gold-light);
  --monde-dark: var(--koda-gold-dark);
  --monde-glow: var(--koda-gold-glow);
  --monde-subtle: var(--koda-gold-subtle);
  --monde-border: var(--koda-gold-border);
  --monde-gradient: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   VARIANTES RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    /* Reduction typographique sur mobile */
    --text-4xl: 2rem;
    --text-5xl: 2.5rem;
    --text-6xl: 3rem;

    /* Espacements reduits */
    --space-mobile-section: var(--space-12);
  }
}

@media (min-width: 1536px) {
  :root {
    /* Augmentation sur grands ecrans */
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME VARIANTS (Future: Light Mode)
   ═══════════════════════════════════════════════════════════════════════════ */

/*
[data-theme="light"] {
  --koda-void: #f8f6f2;
  --koda-panel: #ffffff;
  --koda-text-primary: #1a1a1a;
  // ... etc
}
*/

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  :root {
    --koda-void: #ffffff;
    --koda-panel: #ffffff;
    --koda-text-primary: #000000;
    --koda-text-secondary: #333333;
    --koda-gold: #8b7722;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEMING PAR MONDE - Surcharges des variables --monde-*
   ═══════════════════════════════════════════════════════════════════════════ */

/* TERRA / OUROBOROS - Foret mystique */
body.koda-world-terra,
body.koda-order-ouroboros {
  --monde-primary: var(--koda-terra-primary);
  --monde-secondary: var(--koda-terra-secondary);
  --monde-dark: var(--koda-terra-dark);
  --monde-glow: var(--koda-terra-glow);
  --monde-subtle: var(--koda-terra-subtle);
  --monde-border: var(--koda-terra-border);
  --monde-gradient: linear-gradient(135deg, #0a1f0a 0%, #0a0a0a 100%);
}

/* AQUA / ABYSSAE - Profondeurs oceaniques */
body.koda-world-aqua,
body.koda-order-abyssae {
  --monde-primary: var(--koda-aqua-primary);
  --monde-secondary: var(--koda-aqua-secondary);
  --monde-dark: var(--koda-aqua-dark);
  --monde-glow: var(--koda-aqua-glow);
  --monde-subtle: var(--koda-aqua-subtle);
  --monde-border: var(--koda-aqua-border);
  --monde-gradient: linear-gradient(135deg, #0a0f1f 0%, #0a0a0a 100%);
}

/* LUPUS - Meute automnale */
body.koda-world-lupus,
body.koda-world-canin,
body.koda-order-lupus {
  --monde-primary: var(--koda-lupus-primary);
  --monde-secondary: var(--koda-lupus-secondary);
  --monde-dark: var(--koda-lupus-dark);
  --monde-glow: var(--koda-lupus-glow);
  --monde-subtle: var(--koda-lupus-subtle);
  --monde-border: var(--koda-lupus-border);
  --monde-gradient: linear-gradient(135deg, #1f0a0a 0%, #0a0a0a 100%);
}

/* AERIA - Ciel violet */
body.koda-world-aeria,
body.koda-order-aeria {
  --monde-primary: var(--koda-aeria-primary);
  --monde-secondary: var(--koda-aeria-secondary);
  --monde-dark: var(--koda-aeria-dark);
  --monde-glow: var(--koda-aeria-glow);
  --monde-subtle: var(--koda-aeria-subtle);
  --monde-border: var(--koda-aeria-border);
  --monde-gradient: linear-gradient(135deg, #1a0a1f 0%, #0a0a0a 100%);
}

/* TANAE - Terrier chaleureux */
body.koda-world-tanae,
body.koda-order-tanae {
  --monde-primary: var(--koda-tanae-primary);
  --monde-secondary: var(--koda-tanae-secondary);
  --monde-dark: var(--koda-tanae-dark);
  --monde-glow: var(--koda-tanae-glow);
  --monde-subtle: var(--koda-tanae-subtle);
  --monde-border: var(--koda-tanae-border);
  --monde-gradient: linear-gradient(135deg, #1f1a0a 0%, #0a0a0a 100%);
}

/* MYRMEX - Colonie ambre */
body.koda-world-myrmex,
body.koda-order-myrmex {
  --monde-primary: var(--koda-myrmex-primary);
  --monde-secondary: var(--koda-myrmex-secondary);
  --monde-dark: var(--koda-myrmex-dark);
  --monde-glow: var(--koda-myrmex-glow);
  --monde-subtle: var(--koda-myrmex-subtle);
  --monde-border: var(--koda-myrmex-border);
  --monde-gradient: linear-gradient(135deg, #1f1f0a 0%, #0a0a0a 100%);
}