/* Jetons de conception — seule source des couleurs, polices, tailles et espacements (CDC §7.1).
   Toute valeur littérale ailleurs est refusée par tools/ui_lint.py. */

@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBMPlexSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBMPlexSerif-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url("../fonts/IBMPlexSerif-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Couleurs de base */
  --color-bg: #f6f5f2;
  --color-surface: #fafaf8;
  --color-surface-raised: #ffffff;
  --color-text: #1c1c1c;
  --color-text-muted: #55534e;
  --color-border: #d9d6cf;
  --color-border-strong: #a8a49a;
  --color-zebra: #f1efea;

  /* Accent unique (paramètre `ui.accent`), dérivés par opacité uniquement */
  --color-accent: #2f4858;
  --color-on-accent: #ffffff;
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 88%, var(--color-text));
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 8%, transparent);
  --color-accent-line: color-mix(in srgb, var(--color-accent) 35%, transparent);

  /* Sémantique désaturée */
  --color-success: #3b6a4c;
  --color-success-soft: color-mix(in srgb, var(--color-success) 10%, transparent);
  --color-warning: #7d5a12;
  --color-warning-soft: color-mix(in srgb, var(--color-warning) 12%, transparent);
  --color-danger: #9a2e2e;
  --color-danger-soft: color-mix(in srgb, var(--color-danger) 9%, transparent);
  --color-demo-bg: #efe3c4;
  --color-demo-text: #4a3608;
  --color-backdrop: color-mix(in srgb, var(--color-text) 30%, transparent);

  /* Volets (pistes et diagrammes) : teintes désaturées, distinguables, jamais en aplat saturé */
  --color-volet-1: #2f4858;
  --color-volet-2: #6b2d3a;
  --color-volet-3: #3b6a4c;
  --color-volet-4: #7d5a12;
  --color-volet-5: #4f4a6e;
  --color-volet-6: #2e5f63;
  --color-volet-7: #6e4f3a;
  --color-volet-8: #55534e;
  --color-piste-faits: #55534e;
  --color-piste-procedure: #2f4858;
  --color-piste-travail: #3b6a4c;
  --color-piste-echanges: #7d5a12;
  --color-piste-financier: #6b2d3a;

  /* Typographie */
  --font-text: "IBM Plex Sans", "Public Sans", sans-serif;
  --font-serif: "IBM Plex Serif", "Source Serif", serif;
  --font-mono: "IBM Plex Mono", monospace;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --leading: 1.5;
  --leading-tight: 1.25;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --measure: 75ch;

  /* Espacements (grille 4 px) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Formes, traits, mouvements */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 6px;
  --line: 1px;
  --line-strong: 2px;
  --focus-ring: 2px;
  --transition: 120ms ease-out;

  /* Dimensions de mise en page */
  --size-icon: 16px;
  --size-icon-lg: 20px;
  --size-sidebar: 232px;
  --size-topbar: 48px;
  --size-control: 36px;
  --size-control-sm: 28px;
  --size-content: 1280px;
  --size-form: 640px;
  --size-narrow: 420px;
  --size-col-sm: 120px;
  --size-col-md: 200px;
}