/* ==========================================================================
   YapDocs — tokens de design
   Source : YapSoft — Charte graphique v1.1 (septembre 2026).
   Thème sombre par défaut ; thème clair via [data-theme="light"].
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Palette de la charte */
  --night: #0a0a12;
  --night-deep: #07070d;
  --paper: #f6f6fa;

  /* Encre — échelle de gris bleutés */
  --ink-100: #ececf3;
  --ink-200: #d6d6e2;
  --ink-300: #b4b4c8;
  --ink-400: #8a8aa3;
  --ink-500: #5c5c74;
  --ink-600: #3e3e54;
  --ink-700: #2a2a3c;
  --ink-800: #1b1b2a;
  --ink-900: #12121e;
  --ink-950: #0a0a12;

  /* Violet */
  --violet-300: #b3a2ff;
  --violet-400: #9a83ff;
  --violet-500: #7c5cff;
  --violet-600: #6440f5;
  --violet-700: #4f2fd6;
  --violet-800: #3b22a3;

  /* Cyan */
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;

  /* Sémantique — thème sombre (référence) */
  --bg: var(--night);
  --bg-deep: var(--night-deep);
  --surface: var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-high: var(--ink-700);
  --text: var(--paper);
  --text-soft: var(--ink-300);
  --text-faint: var(--ink-400);
  --line: rgb(246 246 250 / 11%);
  --line-strong: rgb(246 246 250 / 22%);
  --violet: var(--violet-500);
  --violet-text: var(--violet-300);
  --cyan: var(--cyan-400);
  --button-bg: var(--violet-500);
  --button-text: var(--night);

  /* Typographie */
  --font-display: "Space Grotesk", "Arial", sans-serif;
  --font-body: "Inter", "Arial", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Rayons, ombres, rythme */
  --radius-sm: 0.75rem;
  --radius: 1.25rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;
  --shadow-card: 0 1.5rem 4rem rgb(0 0 0 / 28%);
  --max-width: 76rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Produit — accent catalogue (or YapDocs) */
  --product: var(--violet);
  --product-soft: rgb(124 92 255 / 18%);
  --product-ink: var(--violet-300);
}

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

  --bg: var(--paper);
  --bg-deep: #fff;
  --surface: var(--ink-100);
  --surface-raised: #fff;
  --surface-high: var(--ink-200);
  --text: var(--night);
  --text-soft: var(--ink-500);
  --text-faint: var(--ink-400);
  --line: rgb(10 10 18 / 12%);
  --line-strong: rgb(10 10 18 / 24%);
  --violet: var(--violet-600);
  --violet-text: var(--violet-700);
  --cyan: var(--cyan-600);
  --button-bg: var(--violet-600);
  --button-text: #fff;
  --shadow-card: 0 1.5rem 4rem rgb(10 10 18 / 12%);
  --product-soft: rgb(100 64 245 / 12%);
  --product-ink: var(--violet-600);
}