/* =========================================================================
   TENDÈ ACADEMY — Design tokens
   Palette : Bleu royal, Or, Vert émeraude — style premium, africain, professionnel.
   Repris fidèlement des maquettes UI/UX fournies.
   ========================================================================= */
:root {
  /* Couleurs de marque */
  --navy-900: #0a1c40;
  --navy-800: #0f2a5c;
  --royal-700: #14328a;
  --royal-600: #1a3fb0;
  --royal-500: #2454d1;
  --royal-100: #e8edfb;
  --gold-600: #b8860b;
  --gold-500: #d4a017;
  --gold-400: #e6b94a;
  --gold-100: #fbf1d9;
  --emerald-700: #146b3a;
  --emerald-600: #1f9d55;
  --emerald-500: #27b566;
  --emerald-100: #e3f7ec;

  /* Neutres */
  --ink-900: #10131a;
  --ink-700: #333846;
  --ink-500: #5b6270;
  --ink-300: #97a0b0;
  --ink-100: #e5e8ef;
  --bg-app: #f6f8fc;
  --bg-card: #ffffff;
  --white: #ffffff;

  /* Sémantique */
  --color-primary: var(--royal-600);
  --color-primary-dark: var(--navy-800);
  --color-accent: var(--gold-500);
  --color-success: var(--emerald-600);
  --color-danger: #c23b3b;
  --color-warning: #b8860b;

  /* Typo */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Poppins', var(--font-sans);

  /* Rayons / ombres */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(10, 28, 64, 0.08);
  --shadow-md: 0 8px 24px rgba(10, 28, 64, 0.10);
  --shadow-lg: 0 20px 45px rgba(10, 28, 64, 0.16);

  /* Layout */
  --container-max: 1200px;
  --header-h: 68px;
  --nav-h-mobile: 62px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-app: #0b1120;
    --bg-card: #121a2e;
    --ink-900: #f3f5fa;
    --ink-700: #cbd2e1;
    --ink-500: #9aa4b8;
    --ink-100: #232c42;
    --royal-100: #16224a;
    --gold-100: #2b2411;
    --emerald-100: #11291d;
  }
}