:root {
  /* Design foundation: ../CLAUDE_DESIGN (shadcn/ui — white canvas, hairline
     borders, graphite neutrals, Geist type, compact, border-first/flat, no elevation).
     The neutrals, type, spacing and border-first philosophy follow that foundation; the
     one departure is the BRAND: a violet→magenta GRADIENT signature « Orchidée » (--brand-grad)
     carries the single high-contrast filled action (primary button, active nav item,
     logo), with the solid magenta --brand for accents (focus ring, active tab, links,
     control borders) and --brand-wash for tinted micro-surfaces. Only the functional
     status palette below (six semantic kinds) carries the OTHER chromatic colour, and
     never for actions. */
  /* ---- Precise colour code -------------------------------------------------
     Every coloured element (pastille/badge, flash banner, toast, stock alert)
     maps to ONE of six semantic kinds. Each kind = a solid ink + a soft wash:
       neutral  grey    --muted / --chip        draft, neutral, unknown
       info     blue    --info / --info-wash     sent, informational
       ok       green   --ok   / --ok-wash       success, accepted, paid, inflow
       warn     amber   --warn / --warn-wash     warning, adjustment
       bad      red     --bad  / --bad-wash      error, refused, cancelled, outflow
       accent   purple  --accent / --accent-wash invoiced
     The brand ink (--brand) is reserved for primary actions, never status. */
  --bg: #ffffff;
  --sidebar-w: 230px;
  --panel: #ffffff;
  --ink: #0a0a0a;
  --muted: #737373;
  --line: #e5e5e5;
  /* ===== BRAND « Orchidée » — signature couleur de tout le site ===============
     Point de bascule unique : ces tokens (jusqu'à --brand-wash) portent toute
     l'identité de marque ; en changer les valeurs reskinne l'app entière. Deux
     palettes alternatives (Améthyste, Crépuscule) vivent en blocs `html[data-theme=…]`
     juste après ce :root, et le thème actif se choisit d'un mot dans src/html.js
     (constante THEME → attribut data-theme). Les trois signatures sont présentées
     côte à côte sur /design.
     « Orchidée » : la marque est un DÉGRADÉ chaud violet → magenta (la signature du
     projet). --brand-grad = le dégradé, porté par les surfaces pleines (bouton primaire,
     item de nav actif, logo). --brand = le magenta plein équivalent pour tout usage solide
     (bordures de contrôle, focus, onglet actif, liens via --brand-d). --focus-ring = le
     halo de focus. (Le dégradé ne peut pas vivre dans --brand : une variable couleur ne
     se met pas dans un border/texte, d'où le couple plein + dégradé.) */
  --brand: #a21caf;
  --brand-d: #86198f;
  /* Les deux extrémités du dégradé Orchidée, disponibles en plein : --brand-deep
     (violet, début du dégradé) sert d'encre forte pour les chiffres clés et icônes
     de section ; --brand-light (magenta clair, fin du dégradé) pour les accents doux.
     Le dégradé reste la signature des surfaces pleines + des icônes/valeurs
     « brandées » (mask/background-clip), ce qui fait vivre les trois couleurs. */
  --brand-deep: #7c3aed;
  --brand-light: #e040c8;
  /* Le dégradé Orchidée, décomposé en deux tokens (source de vérité unique, partagée
     par les 3 thèmes) : --grad-angle = l'orientation, --grad-stops = les trois arrêts
     de couleur. --brand-grad les recompose pour toutes les surfaces pleines (bouton
     primaire, lame de nav, logo, icônes, clip-texte). Dégradé FIXE — aucune animation
     (les balayages/rotations d'antan faisaient ramer les postes faibles). */
  --grad-angle: 130deg;
  --grad-stops: #7c3aed 0%, #a21caf 50%, #e040c8 100%;
  --brand-grad: linear-gradient(var(--grad-angle), var(--grad-stops));
  /* Couleur des liens texte : un magenta volontairement plus doux/moins saturé que le
     --brand-d, pour que les liens (très présents dans les tableaux) ne crient pas ;
     ils se renforcent au survol (--brand-d). */
  --link: #9d3aa6;
  --focus-ring: rgba(162, 28, 175, .20);
  /* Sidebar : surface graphite sombre neutre (« tout public » — l'ardoise ne tire ni vers
     le rose ni vers une couleur de marque), filet hairline clair translucide, item actif au
     dégradé de marque (la « lame » sheen+rotation), hover = voile clair. Le wordmark = le
     logo gradient (logo-gradient.webp via html.js logo()), le glyph reste au dégradé Orchidée
     et le libellé + les icônes de nav sont en GRIS CLAIR (--sidebar-ink pour le texte,
     --sidebar-ic un cran plus doux pour les glyphes — le traitement « graphite sombre » du
     showcase /design/menu, blanc sur l'item actif) → marque lisible sur le menu sombre. */
  --sidebar: #17171b;
  --sidebar-ink: #c6c6cd;
  --sidebar-ic: #b6b6c0;
  --sidebar-line: rgba(255,255,255,.09);
  --sidebar-hover: rgba(255,255,255,.07);
  --sidebar-group: #7c7c86;
  --ok: #1f9d57;
  --ok-d: #137a3f;
  --ok-wash: #e4f6ec;
  --warn: #d98a00;
  --warn-d: #9a6300;
  --bad: #d23b3b;
  --bad-d: #b62a2a;
  --bad-wash: #fbe7e7;
  --info: #2566b8;
  --info-wash: #e6f0fb;
  --accent: #6b3fc0;
  --accent-wash: #ede4fb;
  --ink-2: #171717;
  --chip: #f2f2f2;
  --row-hover: #fafafa;
  /* Soft magenta wash for brand-tinted micro-surfaces (tile/combobox/chip hover,
     bulk-selected row) — the Orchidée camaïeu. */
  --brand-wash: #fbe8fb;
  /* Soft amber wash for the warn kind (was sharing the old orange brand-wash). */
  --warn-wash: #fdf3e2;
  /* Pure white for ink/fills sitting on a coloured surface (button label, sidebar
     text, badge ink) — one token so a future theme can repoint it. */
  --white: #fff;
  /* Soft red border of the danger button (between --bad and --bad-wash). */
  --bad-line: #f0c9c9;
  --radius: 10px;     /* inputs, buttons, nested panels */
  --radius-card: 14px; /* cards, tables, modal, auth box */
  /* Border-first/flat: cards & tables separate via the 1px hairline, no elevation.
     Only true overlays (modal / toast / combobox popup) keep a soft shadow. */
  --shadow: none;
  --shadow-pop: 0 6px 24px rgba(20,25,40,.16), 0 2px 6px rgba(20,25,40,.10);
  /* ---- Typography ----------------------------------------------------------
     One font family, one line-height, one size scale, one weight scale for the
     whole app. Never hardcode a font/size/weight in a rule — reference a token.
     The scale is named by its px value (1:1) so intent stays obvious. */
  --font-sans: 'Geist', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lh: 1.5;
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; /* body base */
  --fs-17: 17px; --fs-18: 18px; --fs-19: 19px; --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-26: 26px;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  /* Form field widths — each input declares a content-appropriate size via a
     .field-<size> class (a weight needs far less room than an address). */
  --field-xs: 96px; --field-sm: 150px; --field-md: 230px; --field-lg: 330px; --field-xl: 460px;
  /* One control height for every interactive box — text inputs, selects, native date
     pickers and buttons — so any row of them lines up to the pixel. Native date inputs
     have a taller intrinsic box than text inputs; a shared fixed height (with
     box-sizing: border-box) tames them to the same line. --control-h-sm = the dense
     variant (btn-sm, list-filter controls). */
  --control-h: 34px; --control-h-sm: 28px;
  /* Max width of a data-entry column: a sectioned entity form reads as a column, not a
     band stretched across the whole content area (the « vide à droite » fix). Wide enough
     for the densest section (the supplier-offer table: fournisseur+réf+prix+cond+délai+
     défaut on one line) without sprawling like the old uncapped ~1150px. */
  --form-col: 960px;
  /* Narrower cap for a short inline form (a couple of fields): the card hugs its
     reading column instead of stretching the whole content band into a sparse box
     (the « Nouveau devis » empty-looking page). */
  --form-col-narrow: 560px;
  /* Max width of a pure-text table column (a designation): an over-long value is
     ellipsized at this cap instead of widening the whole table (ui.table → .cell-ellip,
     full text on a title tooltip). Bounds the auto-layout column too. */
  --col-text-max: 24rem;
  /* Zone/section titles (card <h3>, form-section legends): quiet graphite subheads
     in sentence case — no chromatic accent, no uppercase. Each area reads as its own
     block through weight and the hairline grid, not colour. (Nav groups use the
     lighter --sidebar-group; table headers keep their own muted uppercase.) */
  --title-zone: var(--ink);
  /* Author pastille palette — 8 deterministic hues (filled, white text). */
  --av-0: #2566b8; --av-1: #1f9d57; --av-2: #6b3fc0; --av-3: #d98a00;
  --av-4: #c0398b; --av-5: #0f8a8a; --av-6: #d23b3b; --av-7: #4a5568;
}