/* ═══════════════════════════════════════════════════════════════════════════════════════
   GoToRev Product UI — tokens (langage D « Monochrome », validé le 2026-09-30).
   SOURCE UNIQUE : Operations/Engine/ui/tokens.css. Dans une app, ui/ est une COPIE posée par
   `npm run ui:sync` (Operations/Engine) : ne jamais la modifier sur place, un test le refuse.

   Noir, blanc, gris. Aucune couleur d'accent : l'identité d'une app est son glyphe, sur une tuile
   encre. Les couleurs d'état ne vivent que dans des points et icônes de 6 à 14 px.
   Une définition clair/sombre par rôle via light-dark() + color-scheme :
   <html data-theme="light|dark"> force le thème (posé avant le premier rendu par themeScript()),
   tout conteneur [data-theme] aussi. Sombre par défaut.
   Sans Tailwind (page native), le bloc @theme est ignoré par le navigateur : les variables restent.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

:root,
[data-theme] {
  color-scheme: light dark;

  /* Surfaces (relevées sur l'app Linear le 2026-09-30) : cadre = barre latérale, vue intérieure un cran plus claire */
  --canvas: light-dark(#f3f3f4, #0f1011);
  --sidebar: var(--canvas);
  --panel: light-dark(#f7f7f8, #131416);
  --surface: light-dark(#ffffff, #17181a);
  --raised: light-dark(#f3f3f4, #1e1f22);
  --inset: light-dark(#fafafa, #111214);
  --hover: light-dark(rgba(0, 0, 0, 0.035), rgba(255, 255, 255, 0.035));
  --selected: light-dark(rgba(0, 0, 0, 0.055), rgba(255, 255, 255, 0.06));
  --scrim: light-dark(rgba(10, 10, 11, 0.18), rgba(0, 0, 0, 0.55));
  --float: light-dark(rgba(255, 255, 255, 0.95), rgba(28, 29, 32, 0.95));

  /* Texte : ink 18:1, ink-2 ≥ 5.4:1, ink-3 ≥ 4.5:1 sur les surfaces ; ink-4 jamais pour du texte utile */
  --ink: light-dark(#0a0a0b, #f7f8f8);
  --ink-2: light-dark(#5c6068, #8a8f98);
  --ink-3: light-dark(#686c73, #7e828b);
  --ink-4: light-dark(#a4a7ad, #4b4f56);
  --on-ink: light-dark(#ffffff, #08090a);

  /* Filets */
  --line: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08));
  --line-strong: light-dark(rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.12));
  --line-faint: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.045));

  /* Profondeur : filets fins plutôt qu'ombres ; en sombre, une lueur haute de 1 px (Raycast) */
  --glow: light-dark(0 1px 2px rgba(10, 10, 11, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.045)), light-dark(0 0 1px rgba(10, 10, 11, 0.06), 0 0 0 transparent);
  --glow-strong: light-dark(0 2px 6px rgba(10, 10, 11, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.07)), light-dark(0 0 1px rgba(10, 10, 11, 0.08), 0 0 0 transparent);
  --shadow-float: light-dark(0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.1)), light-dark(0 24px 64px -16px rgba(10, 10, 11, 0.22), 0 24px 80px -12px rgba(0, 0, 0, 0.7)), light-dark(0 4px 12px rgba(10, 10, 11, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06));

  /* Palette : Contexte/Brand/palette.json (marine encre, 2026-10-04).
     Marque GoToRev : un murmure (sélection de texte), jamais une surface, un bouton ni un logo.
     Chez un client, la marque du client remplace ces deux valeurs ; le marine GoToRev n'y fuit jamais. */
  --brand: #101c32;
  --brand-whisper: light-dark(rgba(16, 28, 50, 0.16), rgba(159, 183, 209, 0.24));

  /* Tuile d'app : un objet encre, identique dans les deux thèmes (comme une icône d'app) */
  --tile-top: #2c2d31;
  --tile-bottom: #121315;
  --tile-ink: #f7f8f8;
  --tile-edge: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1));

  /* Focus : encre, jamais une couleur */
  --focus: light-dark(rgba(10, 10, 11, 0.55), rgba(247, 248, 248, 0.6));

  /* États : points et icônes seulement (6–14 px), toujours doublés d'un mot. Grammaire Linear :
     en cours (demi-cercle jaune), fini et réussi (coche verte : Ready, Done, Paid, Won, Delivered…),
     en file (pointillé gris), échec (croix rouge). Décision du 2026-09-30 : le violet sort des états. */
  --ok: light-dark(#1f8a55, #4cb782);
  --warn: light-dark(#a86a00, #d9a441);
  --fail: light-dark(#d1343a, #e5484d);
  --progress: light-dark(#b88700, #f2c94c);
  /* Déprécié : ancien « livré » bleu-violet, désormais le vert de --ok. À remplacer par --ok dans les apps. */
  --done: var(--ok);
  --on-state: #ffffff;
  /* Mots d'état : teintes éclaircies en sombre, assombries en clair (contraste du texte) */
  --ok-ink: light-dark(#1b7a4b, #5fc493);
  --warn-ink: light-dark(#8f5a00, #e3b457);
  --fail-ink: light-dark(#b82e33, #eb5a5e);
  --fail-ink-2: light-dark(#b82e33, #ef6b6f);
  --progress-ink: light-dark(#8a6500, #f2c94c);
  --done-ink: var(--ok-ink);

  /* Teintes : six couleurs discrètes pour les agents (glyphe teinté, tuile à 14 %) et les initiales des clients.
     Jamais une surface, un bouton ni un état. */
  --tint-teal: light-dark(#0b8fa3, #3ec8dc);
  --tint-violet: light-dark(#6b4fd4, #a58bf5);
  --tint-amber: light-dark(#b5740f, #eaaa3f);
  --tint-blue: light-dark(#2f6fd6, #6ea2f5);
  --tint-pink: light-dark(#c73a72, #ee6ea1);
  --tint-green: light-dark(#4f8a1c, #92cc55);

  /* Agents de la suite (registre lib/agents.mjs) : un nom = un rôle = une teinte, dans toutes les apps. */
  --agent-default: var(--ink-2);
  --a-echo: var(--tint-teal);
  --a-quill: var(--tint-amber);
  --a-reel: var(--tint-pink);
  --a-frame: var(--tint-violet);
  --a-courier: var(--tint-green);
  --a-scribe: var(--tint-violet);
  --a-pulse: var(--tint-teal);
  --a-scout: var(--tint-teal);
  --a-spark: var(--tint-amber);
  --a-pitch: var(--tint-pink);
  --a-herald: var(--tint-teal);
  --a-ledger: var(--tint-amber);
  --a-porter: var(--tint-green);
  --a-sage: var(--tint-violet);
  --a-swift: var(--tint-amber);
  --a-compass: var(--tint-blue);

  /* Marques de plateformes, couleurs d'origine (X et OpenAI à l'encre). Logos multicolores (Drive, Slack,
     Google, ClickUp) : dessinés tels quels, sans teinte ni fond. */
  --b-youtube: #ff0033;
  --b-linkedin: light-dark(#0a66c2, #3d8fe0);
  --b-x: var(--ink);
  --b-n8n: #ea4b71;
  --b-openai: var(--ink);
  --b-telegram: #26a5e4;
  --b-gmail: #ea4335;
  --b-instagram: #e4405f;
  --b-whatsapp: #25d366;

  /* Graphes : des gris, du plus fort au plus faible (la couleur reste aux états et aux plateformes) */
  --chart-ink: light-dark(#3a3d43, #d2d4d8);
  --chart-1: light-dark(#26282c, #e4e5e7);
  --chart-2: light-dark(#575b62, #a6aab1);
  --chart-3: light-dark(#878b92, #787d85);
  --chart-4: light-dark(#b2b5ba, #53575e);
  --chart-5: light-dark(#d5d7da, #393c41);

  /* Média (vidéo, pellicule, miniature absente) : sombre dans les deux thèmes */
  --film: #0e0f11;
  --film-2: #17181b;
  --film-ink: #f7f8f8;
  --film-ink-2: rgba(247, 248, 248, 0.6);
  --film-line: rgba(255, 255, 255, 0.1);
  --media-chip: rgba(8, 9, 10, 0.66);
  --media-ink: #ffffff;

  /* Rayons : 6 contrôles · 8 lignes et tuiles · 10 vue · 12 panneaux flottants */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-panel: 12px;
  --r-pill: 999px;

  /* Espace (grille de 4 px) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --side-w: 264px;
  --top-h: 48px;
  --row-h: 32px;
  --content-max: 1136px;
  /* Pages publiques (démo, page client, artefact) : une seule largeur de contenu */
  --page-max: 1136px;

  /* Mouvement : 120–180 ms, une seule courbe */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --d-1: 120ms;
  --d-2: 180ms;
  --d-spin: 2.4s;

  --z-top: 30;
  --z-pop: 50;
  --z-dialog: 60;
  --z-toast: 70;

  --font: var(--font-brand), system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

[data-theme='light'] { color-scheme: light; }
[data-theme='dark'] { color-scheme: dark; }

/* Tailwind v4 : les rôles deviennent des utilitaires (bg-surface, text-ink-2, border-line, rounded-panel…) */
@theme inline {
  --color-canvas: var(--canvas);
  --color-sidebar: var(--sidebar);
  --color-panel: var(--panel);
  --color-surface: var(--surface);
  --color-raised: var(--raised);
  --color-inset: var(--inset);
  --color-ink: var(--ink);
  --color-ink-2: var(--ink-2);
  --color-ink-3: var(--ink-3);
  --color-ink-4: var(--ink-4);
  --color-on-ink: var(--on-ink);
  --color-line: var(--line);
  --color-line-strong: var(--line-strong);
  --color-ok: var(--ok);
  --color-warn: var(--warn);
  --color-fail: var(--fail);
  --color-progress: var(--progress);
  --color-done: var(--done);
  --color-success: var(--ok);
  --font-sans: var(--font);
  --font-mono: var(--mono);
  --radius-xs: var(--r-xs);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-panel: var(--r-panel);
  --ease-mono: var(--ease);
}