/* ============================================================
   Qeessel — Design tokens
   Palette extraite du logo (analyse pixel du fichier source) :
   #0C3C4E (marine), #2A9CB4 (teal), #3CC0CC (cyan vif), #D8FCFC (cyan pâle)
   ============================================================ */

:root {
  /* --- Couleurs de marque (échelle) --- */
  --color-primary-950: #071F28;
  --color-primary-900: #0C3C4E;
  --color-primary-800: #123C48;
  --color-primary-700: #185060;
  --color-primary-500: #2A9CB4;
  --color-accent-500: #2FA9B8;
  --color-accent-400: #3CC0CC;
  --color-accent-300: #6FDCE4;
  --color-accent-100: #D8FCFC;

  /* --- Neutres --- */
  --color-neutral-950: #0B1416;
  --color-neutral-900: #1A2E3B;
  --color-neutral-700: #3D4C52;
  --color-neutral-600: #5B6B70;
  --color-neutral-300: #C7D0D2;
  --color-neutral-200: #E4E8E9;
  --color-neutral-100: #F4F7F8;
  --color-white: #FFFFFF;

  /* --- États --- */
  --color-success: #1E9E6B;
  --color-error: #D64545;

  /* --- Tokens sémantiques --- */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-neutral-100);
  --color-bg-inverse: var(--color-primary-950);
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-600);
  --color-text-inverse: var(--color-white);
  --color-border: var(--color-neutral-200);
  --color-brand: var(--color-primary-900);
  --color-brand-strong: var(--color-primary-800);
  --color-accent: var(--color-accent-400);
  --color-accent-soft: var(--color-accent-100);

  --gradient-brand: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-500) 55%, var(--color-accent-400) 100%);
  --gradient-glow: radial-gradient(circle, var(--color-accent-300) 0%, var(--color-accent-400) 40%, transparent 70%);

  /* --- Typographie --- */
  --font-heading: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.9rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.25rem;

  --leading-tight: 1.15;
  --leading-normal: 1.55;

  /* --- Espacements (échelle 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Rayons / ombres --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(12, 60, 78, 0.08);
  --shadow-md: 0 8px 24px rgba(12, 60, 78, 0.12);
  --shadow-lg: 0 20px 48px rgba(12, 60, 78, 0.16);

  /* --- Mise en page --- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}