/* ============================================================
   Système de design — « panneau d'instrument »
   Canvas quasi-noir, accent orange signal réservé à l'état actif,
   filets 1 px au lieu de cartes, chiffres tabulaires dominants.
   ============================================================ */

:root {
  color-scheme: dark light;

  /* --- Surfaces -------------------------------------------- */
  --bg:            #0a0b0d;
  --bg-elev:       #101216;
  --panel:         #14171c;
  --panel-2:       #1b1f26;
  --panel-hi:      #232830;

  /* --- Filets ---------------------------------------------- */
  --line:          #23272e;
  --line-strong:   #343a44;

  /* --- Texte ----------------------------------------------- */
  --text:          #f1f4f8;
  --text-2:        #9aa4b2;
  --text-3:        #626c7a;

  /* --- Accent : uniquement l'état « maintenant » ------------ */
  --accent:        #ff4d17;
  --accent-hot:    #ff6a3d;
  --accent-ink:    #14060a;
  --accent-ghost:  rgba(255, 77, 23, 0.13);
  --accent-line:   rgba(255, 77, 23, 0.38);

  /* --- Sémantique ------------------------------------------ */
  --ok:            #34d07d;
  --ok-ghost:      rgba(52, 208, 125, 0.13);
  --warn:          #ffb020;

  /* Planche anatomique. La planche d'origine est dessinée en gris sur
     fond clair : sur un thème sombre on l'éclaircit légèrement plutôt
     que de l'inverser, une anatomie en négatif devient illisible. */
  --bm-sheet:         #dfe3ea;
  --bm-plate-filter:  none;
  --bm-red:           #d63b36;
  --bm-red-soft:      #e79a97;
  --warn-ghost:    rgba(255, 176, 32, 0.14);
  --danger:        #ff4d4d;
  --danger-ghost:  rgba(255, 77, 77, 0.13);
  --target:        #4aa8ff;
  --target-ghost:  rgba(74, 168, 255, 0.16);

  /* --- Typographie ----------------------------------------- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t-micro: 0.6875rem;   /* 11px — capitales espacées */
  --t-sm:    0.8125rem;   /* 13px */
  --t-base:  0.9375rem;   /* 15px */
  --t-md:    1.0625rem;   /* 17px */
  --t-lg:    1.3125rem;   /* 21px */
  --t-xl:    1.75rem;     /* 28px */
  --t-read:  clamp(2.6rem, 13vw, 3.4rem);   /* charge saisie */
  --t-clock: clamp(4rem, 23vw, 6.5rem);     /* décompte de repos */

  /* --- Espacement ------------------------------------------ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 44px;

  /* --- Formes ---------------------------------------------- */
  --r-xs: 3px;    /* structure : angles nets */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px; /* contrôles tappables : pleinement ronds */

  --tap: 48px;

  /* --- Mouvement ------------------------------------------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --fast: 130ms;
  --mid:  240ms;

  /* --- Marges d'appareil ------------------------------------ */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --tabbar-h: calc(58px + var(--sab));
}

/* Thème clair : mêmes rôles, surfaces inversées.
   L'accent garde exactement la même fonction (état actif). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #f4f5f7;
  --bg-elev:     #ffffff;
  --panel:       #ffffff;
  --panel-2:     #eef0f3;
  --panel-hi:    #e3e6ea;
  --line:        #dfe3e8;
  --line-strong: #c3c9d1;
  --text:        #10131a;
  --text-2:      #5b6472;
  --text-3:      #8a94a2;
  --accent-ink:  #ffffff;
  --accent-ghost: rgba(255, 77, 23, 0.10);
  --accent-line:  rgba(255, 77, 23, 0.45);
  --ok-ghost:     rgba(23, 160, 90, 0.12);
  --ok:           #17a05a;
  --warn:         #b97400;
  --bm-sheet:        #f4f6fa;
  --bm-plate-filter: none;
  --bm-red:          #cf3a35;
  --bm-red-soft:     #e2908d;
  --warn-ghost:   rgba(185, 116, 0, 0.12);
  --danger:       #d92d2d;
  --danger-ghost: rgba(217, 45, 45, 0.10);
  --target:       #1c6fd0;
  --target-ghost: rgba(28, 111, 208, 0.14);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --bg:          #f4f5f7;
    --bg-elev:     #ffffff;
    --panel:       #ffffff;
    --panel-2:     #eef0f3;
    --panel-hi:    #e3e6ea;
    --line:        #dfe3e8;
    --line-strong: #c3c9d1;
    --text:        #10131a;
    --text-2:      #5b6472;
    --text-3:      #8a94a2;
    --accent-ink:  #ffffff;
    --accent-ghost: rgba(255, 77, 23, 0.10);
    --accent-line:  rgba(255, 77, 23, 0.45);
    --ok:           #17a05a;
    --ok-ghost:     rgba(23, 160, 90, 0.12);
    --warn:         #b97400;
    --warn-ghost:   rgba(185, 116, 0, 0.12);
    --danger:       #d92d2d;
    --danger-ghost: rgba(217, 45, 45, 0.10);
    --target:       #1c6fd0;
    --target-ghost: rgba(28, 111, 208, 0.14);
  }
}