/* ==========================================================================
   CapTasks — jetons de design (Lot 1 : jetons & typographie globale)
   Généré à partir du design system CapTasks (Design System Artifact,
   claude.ai/artifact/3xYq1Rdn5XSSDu22nkhM5A — project/tokens.json).

   Ce fichier est injecté EN PREMIER dans le CSS de public/app.html par
   tools/patches_design.py, puis copié tel quel vers public/design_tokens.css
   (chargé séparément par public/admin.html, fichier statique).

   Ne pas renommer ces variables sans mettre à jour tools/patches_design.py
   (qui redirige les anciennes variables --ink/--board/--paper/etc. vers
   celles-ci) et public/admin.html.
   ========================================================================== */

:root{
  /* --- Couleurs (thème clair) --- */
  --ct-bg:#f4f6f9;
  --ct-surface:#ffffff;
  --ct-surface-sunken:#e9edf2;
  --ct-surface-subtle:#f1f3f6;
  --ct-line:#e2e6ec;
  --ct-line-strong:#d5dae1;
  --ct-ink:#1b2430;
  --ct-ink-2:#3b4552;
  --ct-ink-muted:#5b6675;
  --ct-primary:#004da3;
  --ct-primary-soft:#e8f0fa;
  --ct-on-primary:#ffffff;
  --ct-accent:#f49824;
  --ct-on-accent:#1b2430;
  --ct-agenda-frame:#f8c27a;
  --ct-danger:#b42318;
  --ct-danger-soft:#fef3f2;
  --ct-shared:#5b6675;
  --ct-shared-frame:#9aa4b2;
  --ct-on-band:#ffffff;
  --ct-team-example-teal:#0f766e;
  --ct-team-example-rust:#9a3412;

  /* --- Lot 3 : fond grisé, succès, avertissement (jetons validés par Simon le 04/10/2026) --- */
  --ct-scrim:rgba(16,24,40,.45);
  --ct-success:#1e7d46;
  --ct-success-soft:#ecf7f0;
  --ct-warning:#b45309;
  --ct-warning-soft:#fef6e7;
  --ct-on-warning:#ffffff;   /* 3.0.12.2 : texte sur pastille d'alerte d'abonnement (orange / rouge) */
  --ct-on-danger:#ffffff;

  /* --- Typographie --- */
  --font-sans:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ct-page-title-size:24px;
  --ct-page-title-line:30px;
  --ct-page-title-weight:700;
  --ct-page-title-spacing:-0.01em;

  --ct-panel-title-size:22px;
  --ct-panel-title-line:28px;
  --ct-panel-title-weight:700;
  --ct-panel-title-spacing:-0.01em;

  --ct-tile-title-size:15px;
  --ct-tile-title-line:20px;
  --ct-tile-title-weight:600;

  --ct-body-size:14px;
  --ct-body-line:20px;
  --ct-body-weight:400;

  --ct-body-strong-size:14px;
  --ct-body-strong-line:20px;
  --ct-body-strong-weight:600;

  --ct-meta-size:12px;
  --ct-meta-line:16px;
  --ct-meta-weight:500;

  --ct-overline-size:12px;
  --ct-overline-line:16px;
  --ct-overline-weight:700;
  --ct-overline-spacing:0.04em;

  /* --- Espacements --- */
  --ct-space-1:4px;
  --ct-space-2:8px;
  --ct-space-3:12px;
  --ct-space-4:16px;
  --ct-space-5:24px;
  --ct-space-6:32px;

  /* --- Rayons --- */
  --ct-radius-sm:6px;
  --ct-radius-md:8px;
  --ct-radius-lg:10px;
  --ct-radius-xl:12px;
  --ct-radius-full:999px;

  /* --- Ombres --- */
  --ct-shadow-tile:0 1px 2px rgba(16, 24, 40, 0.06);
  --ct-shadow-panel:-8px 0 24px rgba(16, 24, 40, 0.08);
  --ct-shadow-fab:0 8px 20px rgba(0, 77, 163, 0.3);
  --ct-shadow-popover:0 8px 24px rgba(16,24,40,.14);

  /* --- Tailles de contrôle --- */
  --ct-size-icon-btn:32px;
  --ct-size-control:40px;
  --ct-size-touch:44px;
  --ct-size-avatar:24px;
  --ct-size-checkbox:18px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ct-bg:#12161c;
    --ct-surface:#1a2029;
    --ct-surface-sunken:#222935;
    --ct-surface-subtle:#262e3a;
    --ct-line:#2e3744;
    --ct-line-strong:#3a4553;
    --ct-ink:#e8ecf1;
    --ct-ink-2:#c5cdd7;
    --ct-ink-muted:#9aa5b3;
    --ct-primary:#6ea8ff;
    --ct-primary-soft:#16304f;
    --ct-on-primary:#0b1220;
    --ct-accent:#f5a142;
    --ct-on-accent:#1b2430;
    --ct-agenda-frame:#8a5a1e;
    --ct-danger:#f97066;
    --ct-danger-soft:#3a1715;
    --ct-shared:#4b5563;
    --ct-shared-frame:#5b6675;
    --ct-on-band:#ffffff;
    --ct-team-example-teal:#0f766e;
    --ct-team-example-rust:#9a3412;
    --ct-scrim:rgba(0,0,0,.6);
    --ct-success:#4ade80;
    --ct-success-soft:#12301f;
    --ct-warning:#f5b54a;
    --ct-warning-soft:#3a2a10;
    --ct-on-warning:#1b2430;
    --ct-on-danger:#1b2430;
  }
}

:root[data-theme="dark"]{
  --ct-bg:#12161c;
  --ct-surface:#1a2029;
  --ct-surface-sunken:#222935;
  --ct-surface-subtle:#262e3a;
  --ct-line:#2e3744;
  --ct-line-strong:#3a4553;
  --ct-ink:#e8ecf1;
  --ct-ink-2:#c5cdd7;
  --ct-ink-muted:#9aa5b3;
  --ct-primary:#6ea8ff;
  --ct-primary-soft:#16304f;
  --ct-on-primary:#0b1220;
  --ct-accent:#f5a142;
  --ct-on-accent:#1b2430;
  --ct-agenda-frame:#8a5a1e;
  --ct-danger:#f97066;
  --ct-danger-soft:#3a1715;
  --ct-shared:#4b5563;
  --ct-shared-frame:#5b6675;
  --ct-on-band:#ffffff;
  --ct-team-example-teal:#0f766e;
  --ct-team-example-rust:#9a3412;
  --ct-scrim:rgba(0,0,0,.6);
  --ct-success:#4ade80;
  --ct-success-soft:#12301f;
  --ct-warning:#f5b54a;
  --ct-warning-soft:#3a2a10;
  --ct-on-warning:#1b2430;
  --ct-on-danger:#1b2430;
}

/* Zones sûres (correctif 3.0.8) : la balise viewport porte viewport-fit=cover, le contenu peut donc passer sous l'encoche et sous la
   barre d'accueil. Marges d'écran posées une seule fois sur <html> (nulles hors appareil à encoche et sur ordinateur) ; les éléments
   position:fixed (volets, chat, bulle, bannières) les reprennent via ces variables. Pas de jeton --ct-* : ce n'est pas du design system. */
:root{ --sa-t:env(safe-area-inset-top, 0px); --sa-r:env(safe-area-inset-right, 0px); --sa-b:env(safe-area-inset-bottom, 0px); --sa-l:env(safe-area-inset-left, 0px); }
html{ padding:var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); }