:root {
  /* Charte agence */
  --primary-900: #052733;
  --primary-800: #073e52;
  --primary-700: #0b4f6c;     /* charte */
  --primary-500: #0f6e90;
  --primary-300: #4ba7c4;
  --primary-200: #9fd1de;
  --primary-100: #cfe8f0;
  --cyan-bright: #01baef;

  --accent-700: #c24f00;
  --accent-600: #d95a06;
  --accent-500: #f7741c;      /* charte */
  --accent-300: #ffa560;
  --accent-100: #ffe7d2;
  --yellow-warm: #ffe83e;

  /* Surfaces */
  --surface-0: #fafbfc;
  --surface-1: #ffffff;
  --surface-2: #f2f5f7;
  --surface-3: #e6edf0;
  --surface-inverse: #052733;

  /* Encre */
  --ink-900: #06232e;
  --ink-700: #1e4453;
  --ink-500: #547382;
  --ink-300: #93a6b0;
  --ink-100: #dce5e9;

  /* Statuts */
  --ok:      #2fab6b;
  --ok-bg:   #e3f7ec;
  --warn:    #e0a21a;
  --warn-bg: #fdf3d9;
  --danger:  #c6382b;
  --danger-bg: #fbe3e0;
  --idle:    #9097a0;
  --idle-bg: #eef1f3;

  /* Rayons */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Ombres */
  --shadow-1: 0 1px 2px rgba(6,35,46,.06), 0 4px 12px rgba(6,35,46,.05);
  --shadow-2: 0 6px 18px rgba(6,35,46,.10), 0 24px 48px rgba(6,35,46,.08);
  --shadow-inset: inset 0 0 0 1px var(--surface-3);

  /* Typo */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #0b4f6c 0%, #01baef 100%);
  --grad-accent: linear-gradient(135deg, #f7741c 0%, #ffe83e 100%);
  --grad-deep: linear-gradient(180deg, #052733 0%, #0b4f6c 100%);

  /* Espacements */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Timing */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 280ms;
}