/* Portaki : Color tokens (v2 · uniformisation sept. 2026)
   Source of truth: Portaki SDUI.dc.html §5.2 (TONES), Portaki Dashboard.dc.html (styles, dvC),
   Portaki Mobile / Guest / Emails. One value per token : see readme.md › Changelog v2. */

:root {
  /* ── Ink scale (zinc) ───────────────────────────────────── */
  --ink-950: #09090b;   /* primary text, dark buttons */
  --ink-900: #18181b;   /* secondary ink, bars */
  --ink-700: #3f3f46;   /* soft text */
  --ink-600: #52525b;   /* body-soft, ghost button text */
  --ink-500: #71717a;   /* muted: labels, meta */
  --ink-400: #a1a1aa;   /* subtle: hints, placeholders, icons */
  --ink-300: #d4d4d8;
  --ink-200: #e4e4e7;
  --ink-100: #f4f4f5;   /* sunken fills */
  --ink-50:  #fafafa;   /* page background */
  --white:   #ffffff;

  /* Lines : alpha on ink-950 */
  --line-faint: rgba(9, 9, 11, 0.05);   /* internal separators, table rows */
  --line-1: rgba(9, 9, 11, 0.08);       /* card / segTabs border (default) */
  --line-3: rgba(9, 9, 11, 0.14);       /* control borders (input, secondary button) */

  /* ── Brand ──────────────────────────────────────────────── */
  --amber: #f59e0b;              /* the one brand/action color */
  --amber-dim: rgba(245, 158, 11, 0.12);
  --amber-soft: rgba(245, 158, 11, 0.08);
  --amber-dark: #a16207;         /* ink on amber tint, links */
  --amber-emphasis: #b45309;
  --amber-solid-hover: #d97706;
  --amber-light: #fbbf24;        /* amber on dark */

  --lime: #84cc16;               /* success / live / developer space */
  --lime-dark: #4d7c0f;
  --lime-light: #a3e635;
  --lime-dim: rgba(132, 204, 22, 0.14);

  --azure: #2b7fbf;
  --azure-dark: #2b6ca3;
  --azure-dim: rgba(43, 127, 191, 0.1);

  --violet: #7c3aed;             /* rôle / premium : jamais un ton sémantique */
  --violet-dark: #6d28d9;
  --violet-dim: rgba(124, 58, 237, 0.12);

  --orange: #ea580c;             /* role: maintenance */
  --orange-dim: rgba(234, 88, 12, 0.12);

  --rouge: #b43e2e;              /* brique : emergency + danger ink on 1 word/value */
  --rouge-dim: rgba(180, 62, 46, 0.1);

  /* ── Tones : 9 roles × [solid, tint, ink, contrast] (SDUI §5.2) ─
     solid = fill · tint = background · ink = text on tint · contrast = text on solid */
  --tone-neutral: #52525b;   --tone-neutral-tint: rgba(9, 9, 11, 0.06);     --tone-neutral-ink: #3f3f46;   --tone-neutral-contrast: #ffffff;
  --tone-primary: #f59e0b;   --tone-primary-tint: rgba(245, 158, 11, 0.14); --tone-primary-ink: #a16207;   --tone-primary-contrast: #09090b;
  --tone-secondary: #18181b; --tone-secondary-tint: rgba(9, 9, 11, 0.06);   --tone-secondary-ink: #18181b; --tone-secondary-contrast: #fafafa;
  --tone-accent: #f59e0b;    --tone-accent-tint: rgba(245, 158, 11, 0.14);  --tone-accent-ink: #a16207;    --tone-accent-contrast: #09090b;
  --tone-info: #2b7fbf;      --tone-info-tint: rgba(43, 127, 191, 0.1);     --tone-info-ink: #2b6ca3;      --tone-info-contrast: #ffffff;
  --tone-success: #84cc16;   --tone-success-tint: rgba(132, 204, 22, 0.14); --tone-success-ink: #4d7c0f;   --tone-success-contrast: #141416;
  --tone-warning: #d97706;   --tone-warning-tint: rgba(217, 119, 6, 0.12);  --tone-warning-ink: #92400e;   --tone-warning-contrast: #ffffff;
  --tone-danger: #dc2626;    --tone-danger-tint: rgba(220, 38, 38, 0.09);   --tone-danger-ink: #b91c1c;    --tone-danger-contrast: #ffffff;
  --tone-emergency: #b43e2e; --tone-emergency-tint: rgba(180, 62, 46, 0.1); --tone-emergency-ink: #9a3324; --tone-emergency-contrast: #ffffff;
  /* Échec non bloquant : distinct de warning (à traiter) et de danger (bloquant) */
  --tone-warn-soft: #e8863b; --tone-warn-soft-tint: rgba(232, 134, 59, 0.12); --tone-warn-soft-ink: #9a4a14; --tone-warn-soft-contrast: #ffffff;


  /* ── Surfaces : light (default shell) ───────────────────── */
  --surface-page: #fafafa;
  --surface-page-warm: #f6f6f4;       /* developer space + mobile app page */
  --surface-default: #ffffff;         /* solid card */
  --surface-elevated: #ffffff;        /* menus, floating sheets (+ shadow-elevated) */
  --surface-sunken: #f4f4f5;          /* code, previews, read-only fields */
  --text: #09090b;
  --text-soft: #3f3f46;
  --text-muted: #71717a;
  --text-subtle: #a1a1aa;
  --text-label: #52525b;           /* libellé de champ, ghost, segment inactif, tag */
  --rouge-ink: #b43e2e;            /* texte brique : bouton danger, delta négatif */

  /* ── Dark sidebar (host dashboard chrome) ───────────────── */
  --sb-bg: #09090b;
  --sb-bg-2: #18181b;
  --sb-line: rgba(255, 255, 255, 0.06);
  --sb-text: #fafafa;
  --sb-mute: rgba(255, 255, 255, 0.55);
  --sb-hint: rgba(255, 255, 255, 0.38);
  --sb-active-bg: rgba(245, 158, 11, 0.12);
  --sb-hover-bg: rgba(255, 255, 255, 0.04);

  /* ── Developer space (lime edge) : light ────────────────── */
  --dev-page: #f6f6f4;
  --dev-surface: #ffffff;
  --dev-subtle: #fafafa;
  --dev-line: #e4e4e7;
  --dev-line-strong: #d4d4d8;
  --dev-accent: #84cc16;          /* lime edge, primary dev button */
  --dev-accent-ink: #4d7c0f;
  --dev-accent-tint: rgba(132, 204, 22, 0.14);
  --dev-edge: 3px solid #84cc16;  /* @kind other */

  /* ── Swatch : 10 information colors (Dot, ColorDotItem, chart series) ─ */
  --swatch-yellow: #eab308; --swatch-green: #16a34a; --swatch-blue: #2563eb; --swatch-brown: #92400e; --swatch-grey: #71717a;
  --swatch-black: #18181b;  --swatch-white: #ffffff; --swatch-red: #dc2626;  --swatch-orange: #ea580c; --swatch-purple: #7c3aed;

  /* ── Interaction & inverse : light ────────────────────── */
  --control-bg: #ffffff;                       /* champ, secondary, cellule OTP */
  --control-bg-readonly: rgba(9, 9, 11, 0.03);
  --state-hover: rgba(9, 9, 11, 0.04);         /* ligne, item de menu, ghost */
  --state-pressed: rgba(9, 9, 11, 0.07);
  --state-selected: rgba(245, 158, 11, 0.08);  /* option choisie */
  --inverse-bg: #09090b;                       /* bouton dark, segment actif, tooltip */
  --inverse-bg-hover: #18181b;
  --inverse-fg: #fafafa;
  --kicker-bg: #fafaf8;
  /* ── Bento (marketing) ─────────────────────────────────── */
  --bento-bg: #f6f6f4;                 /* tuile pleine, sans filet */
  --bento-bg-hover: #f1f1ef;
  --bento-ink-bg: #09090b;             /* tuile sombre mise en avant */
  --bento-ink-bg-hover: #18181b;
  --bento-glow: rgba(245, 158, 11, 0.13);   /* halo ambre qui suit le curseur */
  --bento-glow-ink: rgba(245, 158, 11, 0.22);
  --bento-icon-bg: #ffffff;
  --bento-icon-fg: #a16207;
  --bento-mock-bg: #ffffff;
  --bento-mock-line: rgba(9, 9, 11, 0.06);
  --kicker-fg: #a16207;                /* sur-titre de section marketing */
  --knob: #ffffff;                             /* pastille du Switch */
  --focus-ring: 0 0 0 4px rgba(9, 9, 11, 0.07);
  --focus-ring-visible: 0 0 0 2px var(--surface-page), 0 0 0 4px #09090b; /* :focus-visible clavier */

  /* ── Opacity ─────────────────────────────────────────────── */
  --opacity-disabled: 0.5; /* @kind other */
  --opacity-muted-bar: 0.33; /* @kind other */

  /* ── Glass : RESTRICTED: landing on mesh bg, overlay veils, mobile nav/floating buttons.
     Never inside a dashboard or module surface. ───────────── */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.8);
  --veil: rgba(9, 9, 11, 0.34);        /* overlay backdrop */

  --mesh-blob-amber: rgba(245, 158, 11, 0.16);
  --mesh-blob-lime: rgba(132, 204, 22, 0.12);
  --mesh-blob-azure: rgba(43, 127, 191, 0.1);
}

/* ── Dark shell : one palette for dashboard, dev space and mobile ── */
[data-pk-theme="dark"], .ds-dark {
  --surface-page: #0b0b0d;
  --surface-page-warm: #0b0b0d;
  --surface-default: #151518;
  --surface-elevated: #1c1c20;
  --surface-sunken: #0f0f11;
  --text: #fafafa;
  --text-soft: #d4d4d8;
  --text-muted: #a1a1aa;
  --text-subtle: #71717a;
  --text-label: #c9c9cf;
  --rouge-ink: #f2a193;
  --lime-dark: #bef264; --amber-dark: #fbbf24; --azure-dark: #8cc4ef; --violet-dark: #c4b5fd;
  --azure: #5aa6e0; --violet: #a78bfa; --orange: #fb923c;
  --azure-dim: rgba(90, 166, 224, 0.14); --violet-dim: rgba(167, 139, 250, 0.14); --orange-dim: rgba(251, 146, 60, 0.14); --lime-dim: rgba(163, 230, 53, 0.14); --amber-dim: rgba(245, 158, 11, 0.16); --amber-soft: rgba(245, 158, 11, 0.1);
  --line-faint: rgba(255, 255, 255, 0.05);
  --line-1: rgba(255, 255, 255, 0.08);
  --line-3: rgba(255, 255, 255, 0.16);
  --control-bg: #111114;
  --control-bg-readonly: rgba(255, 255, 255, 0.03);
  --state-hover: rgba(255, 255, 255, 0.05);
  --state-pressed: rgba(255, 255, 255, 0.08);
  --state-selected: rgba(245, 158, 11, 0.12);
  --inverse-bg: #fafafa;
  --inverse-bg-hover: #e4e4e7;
  --inverse-fg: #09090b;
  --kicker-bg: #1c1c20;
  --bento-bg: #141417;
  --bento-bg-hover: #19191d;
  --bento-ink-bg: #1f1f24;
  --bento-ink-bg-hover: #26262c;
  --bento-glow: rgba(245, 158, 11, 0.12);
  --bento-glow-ink: rgba(245, 158, 11, 0.2);
  --bento-icon-bg: #1f1f24;
  --bento-icon-fg: #fbbf24;
  --bento-mock-bg: #1c1c20;
  --bento-mock-line: rgba(255, 255, 255, 0.07);
  --kicker-fg: #fbbf24;
  --knob: #fafafa;
  --focus-ring: 0 0 0 4px rgba(255, 255, 255, 0.1);
  --focus-ring-visible: 0 0 0 2px var(--surface-page), 0 0 0 4px #fafafa;
  --glass-bg: rgba(21, 21, 24, 0.65);
  --glass-bg-strong: rgba(21, 21, 24, 0.85);
  --glass-border: rgba(255, 255, 255, 0.08);
  --veil: rgba(0, 0, 0, 0.55);
  --mesh-blob-amber: rgba(245, 158, 11, 0.12);
  --mesh-blob-lime: rgba(132, 204, 22, 0.08);
  --mesh-blob-azure: rgba(43, 127, 191, 0.1);
  --rouge-dim: rgba(224, 106, 87, 0.14);

  --tone-neutral: #a1a1aa;   --tone-neutral-tint: rgba(255, 255, 255, 0.08);  --tone-neutral-ink: #d4d4d8;   --tone-neutral-contrast: #09090b;
  --tone-primary: #f59e0b;   --tone-primary-tint: rgba(245, 158, 11, 0.16);   --tone-primary-ink: #fbbf24;   --tone-primary-contrast: #09090b;
  --tone-secondary: #fafafa; --tone-secondary-tint: rgba(255, 255, 255, 0.1); --tone-secondary-ink: #fafafa; --tone-secondary-contrast: #09090b;
  --tone-accent: #f59e0b;    --tone-accent-tint: rgba(245, 158, 11, 0.16);    --tone-accent-ink: #fbbf24;    --tone-accent-contrast: #09090b;
  --tone-info: #5aa6e0;      --tone-info-tint: rgba(90, 166, 224, 0.14);      --tone-info-ink: #8cc4ef;      --tone-info-contrast: #09090b;
  --tone-success: #a3e635;   --tone-success-tint: rgba(163, 230, 53, 0.14);   --tone-success-ink: #bef264;   --tone-success-contrast: #141416;
  --tone-warning: #fbbf24;   --tone-warning-tint: rgba(251, 191, 36, 0.14);   --tone-warning-ink: #fcd34d;   --tone-warning-contrast: #141416;
  --tone-danger: #f87171;    --tone-danger-tint: rgba(248, 113, 113, 0.12);   --tone-danger-ink: #fca5a5;    --tone-danger-contrast: #141416;
  --tone-emergency: #e06a57; --tone-emergency-tint: rgba(224, 106, 87, 0.14); --tone-emergency-ink: #f2a193; --tone-emergency-contrast: #141416;
  --tone-warn-soft: #f0a868; --tone-warn-soft-tint: rgba(240, 168, 104, 0.14); --tone-warn-soft-ink: #f6c79c; --tone-warn-soft-contrast: #141416;

  --dev-page: #0b0b0d; --dev-surface: #151518; --dev-subtle: #1c1c20; --dev-line: rgba(255, 255, 255, 0.08); --dev-line-strong: rgba(255, 255, 255, 0.16);
  --dev-accent-ink: #a3e635; --dev-accent-tint: rgba(163, 230, 53, 0.14);

  --swatch-yellow: #facc15; --swatch-green: #4ade80; --swatch-blue: #60a5fa; --swatch-brown: #c08457; --swatch-grey: #a1a1aa;
  --swatch-black: #27272a;  --swatch-white: #f4f4f5; --swatch-red: #f87171;  --swatch-orange: #fb923c; --swatch-purple: #a78bfa;
}

/* ── Semantic aliases : recomputed in every scope so they follow the dark shell.
   (A var() alias declared only on :root would freeze to its light value.) ── */
:root, [data-pk-theme="dark"], .ds-dark {
  --color-bg-page: var(--surface-page);
  --color-bg-surface: var(--surface-default);
  --color-bg-muted: var(--surface-sunken);
  --color-text: var(--text);
  --color-text-soft: var(--text-soft);
  --color-text-muted: var(--text-muted);
  --color-text-hint: var(--text-subtle);
  --color-border: var(--line-1);
  --color-border-md: var(--line-3);
  --color-primary: var(--amber);
  --color-on-primary: var(--ink-950);
  --line-2: var(--line-faint);
  --red: var(--tone-danger); /* @deprecated v2 */
  --red-dim: var(--tone-danger-tint); /* @deprecated v2 */
}

[data-pk-theme="dark"], .ds-dark {
  color-scheme: dark;
  color: var(--text);
}

/* Éphémère : hachuré 45° pour tout contenu de démonstration / non réel */
.ds-ephemeral {
  background: repeating-linear-gradient(-45deg, #fafafa 0 8px, #ffffff 8px 16px);
}
.ds-dark .ds-ephemeral, [data-pk-theme="dark"] .ds-ephemeral {
  background: repeating-linear-gradient(-45deg, #151518 0 8px, #1c1c20 8px 16px);
}