/* The legacy variables, mapped to the 2026 tokens below (plan §3.1). Hues change for blue, green, pink and yellow:
   blue becomes pervenche, green citron, pink and red tomate, yellow and orange abricot. */
:root {
  /* FONT */
  --poppins-font: Poppins;
  --alice-font: Alice;
  --ruddy-font: 'Ruddy';
  --opendys-font: 'Open Dyslexic';
  --main-font: var(--font-ui);
  --secondary-font: var(--alice-font);
  --headline-font: var(--font-title);
  /* « Icône/Chevron bas », as a mask for the arrows drawn in CSS (selects) */
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.5 4.75L8 11.25L14.5 4.75' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* COLORS */
  /* Gray */
  --color-dark: var(--gris-140);
  --color-gray-dark: var(--gris-130);
  --color-gray: var(--gris-base);
  --color-gray-light: var(--gris-90);
  --color-gray-lighter: var(--gris-94);
  --color-gray-lightest: var(--gris-100);
  --color-white: #ffffff;

  /* Brand */
  --color-brand-dark: var(--gris-120);
  --color-brand: var(--gris-140);
  --color-brand-light: var(--pervenche-97);
  --color-brand-lighter: var(--pervenche-100);

  /* Red */
  --color-red-dark: var(--tomate-120);
  --color-red: var(--tomate-base);
  --color-red-light: var(--tomate-94);
  --color-red-lighter: var(--tomate-100);

  /* Orange */
  --color-orange-darker: var(--abricot-140);
  --color-orange-dark: var(--abricot-130);
  --color-orange: var(--abricot-110);
  --color-orange-light: var(--abricot-base);
  --color-orange-lighter: var(--abricot-94);
  --color-orange-lightest: var(--abricot-100);

  /* Green */
  --color-green-darker: var(--citron-140);
  --color-green-dark: var(--citron-130);
  --color-green: var(--citron-120);
  --color-green-light: var(--citron-90);
  --color-green-lighter: var(--citron-94);
  --color-green-lightest: var(--citron-100);

  /* Yellow */
  --color-yellow-darker: var(--abricot-130);
  --color-yellow-dark: var(--abricot-120);
  --color-yellow: var(--abricot-base);
  --color-yellow-light: var(--abricot-90);
  --color-yellow-lighter: var(--abricot-97);
  --color-yellow-lightest: var(--abricot-100);

  /* Blue */
  --color-blue-darker: var(--pervenche-140);
  --color-blue-dark: var(--pervenche-130);
  --color-blue: var(--pervenche-base);
  --color-blue-light: var(--pervenche-90);
  --color-blue-lighter: var(--pervenche-97);
  --color-blue-lightest: var(--pervenche-100);

  /* Cyan */
  --color-cyan: var(--pervenche-92);
  --color-cyan-light: var(--pervenche-94);
  --color-cyan-lighter: var(--pervenche-100);

  /* Pink */
  --color-pink-darker: var(--tomate-140);
  --color-pink-dark: var(--tomate-130);
  --color-pink: var(--tomate-base);
  --color-pink-light: var(--tomate-92);
  --color-pink-lighter: var(--tomate-97);
  --color-pink-lightest: var(--tomate-100);

  /* Purple */
  --color-purple-darker: var(--violet-130);
  --color-purple-dark: var(--violet-120);
  --color-purple: var(--violet-base);
  --color-purple-light: var(--violet-92);
  --color-purple-lighter: var(--violet-98);
  --color-purple-lightest: var(--violet-100);

  /* Neutral */
  --color-neutral-900: var(--gris-130);
  --color-neutral-800: var(--gris-120);
  --color-neutral-700: var(--gris-110);
  --color-neutral-600: var(--gris-base);
  --color-neutral-500: var(--gris-90);
  --color-neutral-400: var(--gris-92);
  --color-neutral-300: var(--gris-94);
  --color-neutral-200: var(--gris-100);

  /* Highlight colors */
  --color-highlight-orange: #ff942e;
  --color-highlight-blue: #1ebfe0;
  --color-highlight-green: #0ace96;
  --color-highlight-pink: #ea9bff;
  --color-highlight-yellow: #ffc627;
  --color-highlight-brown: #cdc0bd;
  --color-highlight-red: #f695a1;
  --color-highlight-blue-light: #c8d8ff;

  /* LPM colors */
  --color-lpm-green: #00ba76;
  --color-lpm-green-dark: #125b40;
  --color-lpm-yellow: #ffb500;

  /* One main color, violet, whatever the level */
  --color-primary-darker: var(--violet-130);
  --color-primary-dark: var(--violet-120);
  --color-primary: var(--violet-base);
  --color-primary-light: var(--violet-92);
  --color-primary-lighter: var(--violet-98);
  --color-primary-lightest: var(--violet-100);

  /* Secondary */
  --color-secondary-darker: var(--violet-130);
  --color-secondary-dark: var(--violet-120);
  --color-secondary: var(--violet-base);
  --color-secondary-light: var(--violet-92);
  --color-secondary-lighter: var(--violet-98);
  --color-secondary-lightest: var(--violet-100);
  --color-secondary-hover: var(--violet-96);
  --color-secondary-focus: var(--violet-94);

  --bg-color-base: var(--color-bg-page);
  --box-shadow-main-color: rgba(71, 16, 126, 0.1);
  --box-shadow-pop-up-color: rgba(71, 16, 126, 0.18);
}

/* Design system 2026 (tasks/plans/design-system-2026.md; Figma « Plume – Design System 2026 » is the source).
   A smaller number is a darker shade (140 darkest, 100 lightest). */
:root {
  /* Violet, the main color */
  --violet-130: #260748;
  --violet-120: #3b0a6e;
  --violet-110: #520e94;
  --violet-base: #6617b5;
  --violet-90: #8a3fd6;
  --violet-92: #a35dea;
  --violet-94: #c29af1;
  --violet-96: #dcc6f7;
  --violet-98: #eee3fb;
  --violet-100: #f7f2fd;

  /* Citron: success */
  --citron-140: #29510c;
  --citron-130: #3f7d12;
  --citron-120: #68a028;
  --citron-110: #97ca41;
  --citron-base: #c6f35a;
  --citron-90: #d1f57b;
  --citron-92: #def89f;
  --citron-94: #e9fac0;
  --citron-97: #f3fcd6;
  --citron-100: #f9feee;

  /* Abricot: warning, changes requested */
  --abricot-140: #76370a;
  --abricot-130: #b5540f;
  --abricot-120: #cb712f;
  --abricot-110: #e59255;
  --abricot-base: #ffb37a;
  --abricot-90: #ffc295;
  --abricot-92: #ffd3b2;
  --abricot-94: #ffe2cc;
  --abricot-97: #fff5ec;
  --abricot-100: #fff7f2;

  /* Tomate: danger, errors, notifications */
  --tomate-140: #7e2614;
  --tomate-130: #c23a1f;
  --tomate-120: #d44428;
  --tomate-110: #ea4f32;
  --tomate-base: #ff5a3c;
  --tomate-90: #ff7b63;
  --tomate-92: #ff9f8e;
  --tomate-94: #ffc0b5;
  --tomate-97: #ffefeb;
  --tomate-100: #ffeeeb;

  /* Pervenche: info */
  --pervenche-140: #26338b;
  --pervenche-130: #3b4fd6;
  --pervenche-120: #546ae2;
  --pervenche-110: #7289f1;
  --pervenche-base: #8fa8ff;
  --pervenche-90: #a5b9ff;
  --pervenche-92: #becdff;
  --pervenche-94: #d4deff;
  --pervenche-97: #ebefff;
  --pervenche-100: #f4f6ff;

  /* Gris: 140 is the navy of the text */
  --gris-140: #190e66;
  --gris-130: #423a7a;
  --gris-120: #574f83;
  --gris-110: #6b658d;
  --gris-base: #807b97;
  --gris-90: #9c98ae;
  --gris-92: #b8b5c5;
  --gris-94: #d1cfda;
  --gris-97: #e8e7ec;
  --gris-100: #f7f7f9;

  --blanc: #ffffff;

  /* Gradients: only the first and last Figma stops matter */
  --gradient-magenta-orange: linear-gradient(90deg, #c60578, #f4ae00);
  --gradient-orange-turquoise: linear-gradient(90deg, #f4ae00, #10c6b0);
  --gradient-violet-turquoise: linear-gradient(90deg, #a35cea, #10c6b0);
  --gradient-nuit-violet: linear-gradient(90deg, #190e66, #7a2bd6);
  --gradient-violet-nuit: linear-gradient(90deg, #7a2bd6, #190e66);
  --gradient-nuit-turquoise: linear-gradient(90deg, #190e66, #10c6b0);
  --gradient-nuit-rose: linear-gradient(90deg, #190e66, #f7d1d5);
  --gradient-violet-electrique: linear-gradient(90deg, #972fff, #dc68ff);
  --gradient-lagon: linear-gradient(90deg, #09b3f6, #00ffe0);

  /* Semantic roles */
  --color-text: var(--gris-140);
  --color-text-muted: var(--gris-base);
  --color-border-input: var(--gris-90);
  --color-bg-page: var(--violet-100);
  --color-surface: var(--blanc);
  --color-danger: var(--tomate-base);
  --color-focus-ring: var(--violet-90);

  /* Dimensions */
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-card: 0 4px 5px rgba(71, 16, 126, 0.1);
  --shadow-hover: 0 8px 24px rgba(71, 16, 126, 0.18);

  /* Fonts: Poppins with its bold and italics declared (fonts/application_fonts.css) */
  --font-ui: var(--poppins-font), sans-serif;
  --font-reading: var(--alice-font), serif;
  --font-title: var(--font-ui);
}

/* Ruddy titles in primary school only */
html[data-level='primaire'] {
  --font-title: var(--ruddy-font), var(--font-ui);
}