/* panelkit — design tokens (v1.0)
 *
 * The single source of the panels' visual identity. Plain CSS custom
 * properties: usable from Jinja templates, Vue, vanilla JS and Tailwind
 * (see tailwind.preset.js) with no build step.
 *
 * Rules (docs/03-identite-visuelle.md):
 *  - components use roles (--pk-surface, --pk-text-2…), never raw hex;
 *  - a panel may override --pk-brand only (its accent); nothing else;
 *  - dark mode is a selected palette, not an automatic inversion: OS setting
 *    by default, [data-theme="light"|"dark"] on <html> wins both ways.
 */

:root {
  color-scheme: light;

  /* ── Typography ─────────────────────────────────────────────── */
  --pk-font: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pk-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pk-text-xs: 12px;
  --pk-text-sm: 13px;
  --pk-text-md: 14px;   /* body */
  --pk-text-lg: 16px;   /* h2, card titles */
  --pk-text-xl: 22px;   /* h1, page title */
  --pk-text-2xl: 30px;  /* KPI value */
  --pk-leading: 1.5;

  /* ── Spacing (4px grid) and shape ───────────────────────────── */
  --pk-space-1: 4px;
  --pk-space-2: 8px;
  --pk-space-3: 12px;
  --pk-space-4: 16px;
  --pk-space-5: 20px;
  --pk-space-6: 24px;
  --pk-space-8: 32px;
  --pk-radius-sm: 4px;
  --pk-radius: 8px;
  --pk-radius-pill: 999px;
  --pk-sidebar-w: 240px;
  --pk-topbar-h: 48px;
  --pk-content-max: 1440px;

  /* ── Chrome: top bar + sidebar, dark in both modes ──────────── */
  --pk-chrome: #0f1b2a;
  --pk-chrome-2: #16263a;       /* hover */
  --pk-chrome-3: #1f3349;       /* active item */
  --pk-chrome-text: #d5dbe5;
  --pk-chrome-muted: #8d9bb0;
  --pk-brand: #ec7211;          /* the one per-panel override: logo, active marker */

  /* ── Surfaces and ink ───────────────────────────────────────── */
  --pk-bg: #f2f4f8;
  --pk-surface: #ffffff;
  --pk-surface-2: #f8fafc;      /* card header, table header, zebra */
  --pk-surface-3: #eef2f7;      /* hover, selected row */
  --pk-border: #e3e8ef;
  --pk-border-strong: #cfd7e3;
  --pk-text: #0f1b2a;
  --pk-text-2: #4a5567;
  --pk-text-3: #5f6b7e;         /* ≥ 4.5:1 on every light surface */
  --pk-link: #0b6bcb;

  /* ── Action ─────────────────────────────────────────────────── */
  --pk-primary: #0b6bcb;
  --pk-primary-hover: #0958a8;
  --pk-primary-soft: #e6f0fb;
  --pk-on-primary: #ffffff;
  --pk-focus: 0 0 0 3px rgba(11, 107, 203, 0.35);

  /* ── Status: reserved, always shown with an icon + a label ──── */
  --pk-good: #067647;      --pk-good-soft: #e7f8ef;      --pk-good-border: #a6e3c3;
  --pk-warning: #b54708;   --pk-warning-soft: #fff4e5;   --pk-warning-border: #f5d9a8;
  --pk-critical: #c0262d;  --pk-critical-soft: #fdecec;  --pk-critical-border: #f5c6c6;
  --pk-info: #1d4ed8;      --pk-info-soft: #e8f0fe;      --pk-info-border: #b8d0f7;
  --pk-neutral: #4a5567;   --pk-neutral-soft: #f1f4f8;   --pk-neutral-border: #d5dbe3;

  /* ── Charts: categorical order is fixed, never cycled ───────── */
  --pk-series-1: #2a78d6;  /* blue    */
  --pk-series-2: #eb6834;  /* orange  */
  --pk-series-3: #1baf7a;  /* aqua    */
  --pk-series-4: #eda100;  /* yellow  */
  --pk-series-5: #e87ba4;  /* magenta */
  --pk-series-6: #008300;  /* green   */
  --pk-series-7: #6250d6;  /* violet  */
  --pk-series-8: #e34948;  /* red     */
  --pk-grid: #edf0f5;

  /* ── Elevation and motion ───────────────────────────────────── */
  --pk-shadow: 0 1px 2px rgba(15, 27, 42, 0.06), 0 1px 1px rgba(15, 27, 42, 0.04);
  --pk-shadow-lg: 0 18px 50px rgba(15, 27, 42, 0.18);
  --pk-overlay: rgba(15, 27, 42, 0.45);
  --pk-ease: 120ms ease-out;
}

/* Dark: OS setting, unless the user picked light. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --pk-chrome: #0a121d; --pk-chrome-2: #121e2d; --pk-chrome-3: #1a2a3e;
    --pk-bg: #0b111b; --pk-surface: #111a27; --pk-surface-2: #0e1622; --pk-surface-3: #18233a;
    --pk-border: #1f2b3c; --pk-border-strong: #2b3a50;
    --pk-text: #e8edf4; --pk-text-2: #aeb9c9; --pk-text-3: #8794a8; --pk-link: #74b3f5;
    --pk-primary: #4c9cf0; --pk-primary-hover: #74b3f5; --pk-primary-soft: #13294a; --pk-on-primary: #0b111b;
    --pk-focus: 0 0 0 3px rgba(76, 156, 240, 0.45);
    --pk-good: #3ccf8e; --pk-good-soft: #0f2f22; --pk-good-border: #1d5a40;
    --pk-warning: #f5a524; --pk-warning-soft: #33240b; --pk-warning-border: #5e4314;
    --pk-critical: #f36b6b; --pk-critical-soft: #3a1518; --pk-critical-border: #6a2529;
    --pk-info: #79a7ff; --pk-info-soft: #14244a; --pk-info-border: #24407a;
    --pk-neutral: #aeb9c9; --pk-neutral-soft: #18233a; --pk-neutral-border: #2b3a50;
    --pk-series-1: #3987e5; --pk-series-2: #d95926; --pk-series-3: #199e70; --pk-series-4: #c98500;
    --pk-series-5: #d55181; --pk-series-6: #008300; --pk-series-7: #9085e9; --pk-series-8: #e66767;
    --pk-grid: #1b2636;
    --pk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --pk-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
    --pk-overlay: rgba(0, 0, 0, 0.6);
  }
}

/* Dark: explicit choice (theme toggle). Same values as above. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --pk-chrome: #0a121d; --pk-chrome-2: #121e2d; --pk-chrome-3: #1a2a3e;
  --pk-bg: #0b111b; --pk-surface: #111a27; --pk-surface-2: #0e1622; --pk-surface-3: #18233a;
  --pk-border: #1f2b3c; --pk-border-strong: #2b3a50;
  --pk-text: #e8edf4; --pk-text-2: #aeb9c9; --pk-text-3: #8794a8; --pk-link: #74b3f5;
  --pk-primary: #4c9cf0; --pk-primary-hover: #74b3f5; --pk-primary-soft: #13294a; --pk-on-primary: #0b111b;
  --pk-focus: 0 0 0 3px rgba(76, 156, 240, 0.45);
  --pk-good: #3ccf8e; --pk-good-soft: #0f2f22; --pk-good-border: #1d5a40;
  --pk-warning: #f5a524; --pk-warning-soft: #33240b; --pk-warning-border: #5e4314;
  --pk-critical: #f36b6b; --pk-critical-soft: #3a1518; --pk-critical-border: #6a2529;
  --pk-info: #79a7ff; --pk-info-soft: #14244a; --pk-info-border: #24407a;
  --pk-neutral: #aeb9c9; --pk-neutral-soft: #18233a; --pk-neutral-border: #2b3a50;
  --pk-series-1: #3987e5; --pk-series-2: #d95926; --pk-series-3: #199e70; --pk-series-4: #c98500;
  --pk-series-5: #d55181; --pk-series-6: #008300; --pk-series-7: #9085e9; --pk-series-8: #e66767;
  --pk-grid: #1b2636;
  --pk-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --pk-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);
  --pk-overlay: rgba(0, 0, 0, 0.6);
}

/* Per-panel accent: one line in the panel, nothing else changes.
 * Chosen to stay ≥ 3:1 on the chrome so the active marker is visible. */
:root[data-panel="infopanel"] { --pk-brand: #ec7211; }  /* orange  — hébergement web */
:root[data-panel="infomail"]  { --pk-brand: #e0b400; }  /* jaune   — messagerie     */
:root[data-panel="dbadmin"]   { --pk-brand: #22a3c8; }  /* cyan    — bases de données */
:root[data-panel="slapdmin"]  { --pk-brand: #10b981; }  /* vert    — annuaire LDAP  */
:root[data-panel="aws"]       { --pk-brand: #a78bfa; }  /* violet  — machines virtuelles */