/**
 * Design Tokens & Variables - Liquid Glass Aesthetic
 * Custom Palette:
 * - Fond emblématique : #361102 (Acajou sombre), #B95512 (Terre cuite / Cuivre), #FFDE73 (Or ambré)
 * - Accents complémentaires : #004777 (Bleu saphir / Lapis), #00AFB5 (Turquoise / Sarcelle)
 */
:root {
  /* 1. Couleurs Emblématiques du Projet */
  --brand-mahogany: #361102;
  --brand-mahogany-rgb: 54, 17, 2;
  --brand-terracotta: #B95512;
  --brand-terracotta-rgb: 185, 85, 18;
  --brand-gold: #FFDE73;
  --brand-gold-rgb: 255, 222, 115;

  /* 2. Couleurs Complémentaires d'Harmonie (coolors.co) */
  --accent-navy: #004777;
  --accent-navy-rgb: 0, 71, 119;
  --accent-teal: #00AFB5;
  --accent-teal-rgb: 0, 175, 181;

  /* Fond Sombre Chaud & Minéral */
  --bg-primary: #120601;
  --bg-secondary: #1a0802;
  --bg-elevated: #280e03;

  /* Accents de Synthèse */
  --accent-primary: var(--accent-teal);
  --accent-primary-rgb: var(--accent-teal-rgb);
  --accent-secondary: var(--brand-gold);
  --accent-secondary-rgb: var(--brand-gold-rgb);
  --accent-warm: var(--brand-terracotta);
  --accent-warm-rgb: var(--brand-terracotta-rgb);

  /* Couleurs de Texte - Haute lisibilité WCAG AA sur verre teinté */
  --text-primary: #fffdf7;
  --text-secondary: #d6c1b0;
  --text-muted: #9e8574;
  --text-inverted: #120601;

  /* Typographie */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Roboto Mono", "Menlo", monospace;

  /* Fluid Font Sizes (Mobile First -> Desktop) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.3vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1.5vw, 2.5rem);
  --text-hero: clamp(2.125rem, 1.75rem + 2.5vw, 3.75rem);

  /* Glassmorphism Tokens - Verre Neutre Ultra-Transparent (Couleur issue du fond uniquement) */
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-bg-subtle: rgba(255, 255, 255, 0.02);
  --glass-bg-hover: rgba(255, 255, 255, 0.05);
  --glass-tab-bg: rgba(255, 255, 255, 0.11);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-subtle: rgba(255, 255, 255, 0.15);
  --glass-border-focus: rgba(255, 255, 255, 0.35);
  --glass-specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.22);
  --glass-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.45);
  --glass-shadow-lg: 0 20px 45px -8px rgba(0, 0, 0, 0.55);

  /* Touch & Layout Targets */
  --touch-target-min: 48px;
  --container-max: 1080px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Radii - Coins très arrondis (26px) */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-card: 26px;
  --radius-lg: 26px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Transitions */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 280ms;
  --duration-slow: 500ms;
}