/* ================================================================
 * ProVsup Design System — pv-variables.css
 * Design tokens — light mode par défaut, dark via data-theme="dark"
 * Ne pas modifier les valeurs directement : ce fichier est la source.
 * ================================================================ */

:root {
  /* ── Accent / brand ─────────────────────────────────────────── */
  --accent:        oklch(0.55 0.17 268);
  --accent-strong: oklch(0.48 0.18 268);
  --accent-soft:   oklch(0.55 0.17 268 / 0.12);
  --accent-ring:   oklch(0.55 0.17 268 / 0.35);
  --accent-fg:     #ffffff;

  /* ── Statuts machine ────────────────────────────────────────── */
  --ok:        oklch(0.62 0.16 150);   /* Marche / vert */
  --warn:      oklch(0.74 0.15 75);    /* Arrêt fin cycle / ambre */
  --stop:      oklch(0.60 0.20 27);    /* Arrêt / défaut / rouge */
  --info:      oklch(0.62 0.13 235);   /* Info / bleu */
  --ok-soft:   oklch(0.62 0.16 150 / 0.14);
  --warn-soft: oklch(0.74 0.15 75  / 0.16);
  --stop-soft: oklch(0.60 0.20 27  / 0.14);
  --info-soft: oklch(0.62 0.13 235 / 0.14);

  /* ── Radii ──────────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   18px;
  --r-pill: 999px;

  /* ── Typographie ────────────────────────────────────────────── */
  --font-ui:   "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* ── Dimensions layout ──────────────────────────────────────── */
  --rail-w:          56px;
  --rail-expanded-w: 220px;
  --cmdbar-h:        52px;

  /* ── Surfaces (thème clair par défaut) ──────────────────────── */
  --bg:        #f4f5f7;
  --surface:   #ffffff;
  --surface-2: #f8f9fa;
  --surface-3: #f0f1f3;
  --elevated:  #ffffff;

  /* ── Bordures ───────────────────────────────────────────────── */
  --border:   #e2e4e8;
  --border-2: #d0d3da;
  --divider:  #eaecef;

  /* ── Texte ──────────────────────────────────────────────────── */
  --text:   #1a1d23;
  --text-2: #4a5568;
  --muted:  #718096;
  --faint:  #a0aab8;

  /* ── Rail (sidebar) ────────────────────────────────────────────── */
  --rail-bg:        #1f1f23;
  --rail-fg:        #d3d3d9;
  --rail-fg-active: #ffffff;
  --rail-border:    #3b3b44;

  /* ── Command bar (top) ──────────────────────────────────────────── */
  --cmd-bg:     #1f1f23;
  --cmd-fg:     #d3d3d9;
  --cmd-border: #3b3b44;

  /* ── Ombres ─────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px oklch(0.2 0.03 268 / 0.08), 0 1px 2px oklch(0.2 0.03 268 / 0.06);
  --shadow-md:   0 4px 12px oklch(0.2 0.03 268 / 0.10), 0 2px 4px oklch(0.2 0.03 268 / 0.06);
  --shadow-lg:   0 18px 48px oklch(0.2 0.03 268 / 0.18), 0 4px 12px oklch(0.2 0.03 268 / 0.10);
  --shadow-rail: 2px 0 16px oklch(0 0 0 / 0.22);

  /* ── Champs formulaire ──────────────────────────────────────── */
  --field-bg:     #ffffff;
  --field-border: #d0d3da;
}


/* ================================================================
 * Dark mode — activé via :root[data-theme="dark"]
 * (posé par pv-theme.js + persisté en localStorage)
 * ================================================================ */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --bg:        #18181a;
  --surface:   #1e1f22;
  --surface-2: #232528;
  --surface-3: #28292d;
  --elevated:  #212225;

  /* Bordures */
  --border:   #313133;
  --border-2: #3d3d40;
  --divider:  #262628;

  /* Texte */
  --text:   #f0f0f2;
  --text-2: #9ba1b0;
  --muted:  #62687a;
  --faint:  #44485a;

  /* Rail */
  --rail-bg:        #1f1f23;
  --rail-fg:        #d3d3d9;
  --rail-fg-active: #ffffff;
  --rail-border:    #3b3b44;

  /* Command bar */
  --cmd-bg:     #1f1f23;
  --cmd-fg:     #d3d3d9;
  --cmd-border: #3b3b44;

  /* Ombres profondes */
  --shadow-sm:   0 2px 6px oklch(0 0 0 / 0.50), 0 1px 2px oklch(0 0 0 / 0.35);
  --shadow-md:   0 6px 20px oklch(0 0 0 / 0.60), 0 2px 6px oklch(0 0 0 / 0.40);
  --shadow-lg:   0 28px 70px oklch(0 0 0 / 0.70), 0 10px 24px oklch(0 0 0 / 0.50);
  --shadow-rail: 2px 0 18px oklch(0 0 0 / 0.45);

  /* Champs */
  --field-bg:     #1a1b1e;
  --field-border: #303338;

  /* Accent légèrement ajusté pour le dark */
  --accent-soft: oklch(0.55 0.17 268 / 0.16);
  --accent-ring: oklch(0.55 0.17 268 / 0.40);
}

/* ── Icônes conditionnelles thème ───────────────────────────────── */
/* Piloté par data-theme sur <html>, actif dès le script anti-flash  */

html[data-theme="dark"]  .pv-icon-if-light { display: none; }
html[data-theme="light"] .pv-icon-if-dark  { display: none; }
/* Fallback : pas de data-theme = dark par défaut */
html:not([data-theme="light"]) .pv-icon-if-light { display: none; }