/*
  PIXWELL — Canonical design tokens
  Source unique pour le site, le Design System, le Plan global et PIXWELL DEB.
  Toute modification de marque doit commencer dans ce fichier.
*/

:root {
  color-scheme: dark;

  /* Neutral palette — aubergines et surfaces originales Pixwell */
  --neutral-100: #100C18;
  --neutral-80: #181020;
  --neutral-60: #21172F;
  --neutral-40: #B9AEC2;
  --neutral-20: #EEE9F6;
  --neutral-0: #F7F3FA;
  --neutral-mist: #F3EEEB;
  --neutral-light-ink: #241B2B;

  /* Brand scales — couleur originale vers le blanc, par sauts de 20 % */
  --violet-100: #8C62FF;
  --violet-80: color-mix(in srgb, var(--violet-100) 80%, white);
  --violet-60: color-mix(in srgb, var(--violet-100) 60%, white);
  --violet-40: color-mix(in srgb, var(--violet-100) 40%, white);
  --violet-20: color-mix(in srgb, var(--violet-100) 20%, white);

  --coral-100: #FF735F;
  --coral-80: color-mix(in srgb, var(--coral-100) 80%, white);
  --coral-60: color-mix(in srgb, var(--coral-100) 60%, white);
  --coral-40: color-mix(in srgb, var(--coral-100) 40%, white);
  --coral-20: color-mix(in srgb, var(--coral-100) 20%, white);

  --magenta-100: #E456A8;
  --magenta-80: color-mix(in srgb, var(--magenta-100) 80%, white);
  --magenta-60: color-mix(in srgb, var(--magenta-100) 60%, white);
  --magenta-40: color-mix(in srgb, var(--magenta-100) 40%, white);
  --magenta-20: color-mix(in srgb, var(--magenta-100) 20%, white);

  --cyan-100: #69D6D0;
  --cyan-80: color-mix(in srgb, var(--cyan-100) 80%, white);
  --cyan-60: color-mix(in srgb, var(--cyan-100) 60%, white);
  --cyan-40: color-mix(in srgb, var(--cyan-100) 40%, white);
  --cyan-20: color-mix(in srgb, var(--cyan-100) 20%, white);

  /* Semantic roles */
  --color-canvas: var(--neutral-100);
  --color-surface: var(--neutral-80);
  --color-surface-raised: var(--neutral-60);
  --color-text: var(--neutral-0);
  --color-text-muted: var(--neutral-40);
  --color-line: color-mix(in srgb, var(--neutral-40) 16%, transparent);
  --color-strategy: var(--coral-100);
  --color-ai: var(--violet-80);
  --color-tech: var(--cyan-100);

  /* Shape, spacing and typography */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --font-sans: Inter, "SF Pro Display", "Segoe UI", Arial, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Iconography — grille et trait communs */
  --icon-size-sm: 20px;
  --icon-size-md: 32px;
  --icon-size-lg: 48px;
  --icon-stroke: 1.75;

  /* Compatibility bridge — anciens noms, aucune couleur autonome */
  --dark: var(--neutral-100);
  --bg: var(--neutral-100);
  --deep: var(--color-surface-raised);
  --deep2: var(--color-surface);
  --ink: var(--neutral-0);
  --paper: var(--neutral-100);
  --text: var(--neutral-0);
  --muted: var(--neutral-40);
  --surface: var(--color-surface);
  --surface2: var(--color-surface-raised);
  --line: var(--color-line);
  --lightInk: var(--neutral-light-ink);
  --lav: var(--neutral-20);
  --mist: var(--neutral-mist);
  --violet: var(--violet-100);
  --violet2: var(--violet-80);
  --coral: var(--coral-100);
  --coral2: var(--coral-80);
  --magenta: var(--magenta-100);
  --cyan: var(--cyan-100);
  --brand: var(--coral-100);
  --brand2: color-mix(in srgb, var(--coral-100) 12%, transparent);
  --blue: var(--violet-80);
  --acid: var(--coral-100);
  --radius: var(--radius-lg);
}