/* ============================================================
   SYNERGETIK — tokens.css
   Design system « LA SYMBIOSE » · précision de machine + vivant qui apprend
   Usage : documents (dont Markdown capitalisés), présentations clients, livrables.
   Le schéma complet et les règles d'usage : voir DESIGN.md.
   ⚠️ BROUILLON — non validé (première itération, spike OpenDesign).
   ============================================================ */

/* ---------- 1. Theme scaffolding ---------- */
:root {
  color-scheme: dark;
  --theme: dark;
}

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

/* ---------- 2. Raw color tokens (OKLCh) ---------- */
/* Indigo profond / noir bleuté — la souveraineté */
:root {
  --clr-indigo-950: oklch(0.148 0.034 266);
  --clr-indigo-900: oklch(0.175 0.038 266);   /* bg */
  --clr-indigo-800: oklch(0.22 0.034 266);    /* surface */
  --clr-indigo-700: oklch(0.26 0.03 266);     /* surface-2 */
  --clr-indigo-600: oklch(0.32 0.03 266);     /* border */
  --clr-indigo-500: oklch(0.42 0.03 266);
  --clr-indigo-400: oklch(0.53 0.03 266);
  --clr-indigo-300: oklch(0.64 0.028 266);
  --clr-indigo-200: oklch(0.76 0.02 266);
  --clr-indigo-100: oklch(0.88 0.015 266);

  /* Neutres chauds — l'ivoire / le papier */
  --clr-warm-050: oklch(0.995 0.004 85);
  --clr-warm-100: oklch(0.975 0.007 85);      /* bg light */
  --clr-warm-200: oklch(0.93 0.01 85);
  --clr-warm-300: oklch(0.875 0.014 85);      /* border light */
  --clr-warm-400: oklch(0.78 0.018 85);
  --clr-warm-500: oklch(0.69 0.02 88);        /* muted dark */
  --clr-warm-600: oklch(0.60 0.02 88);
  --clr-warm-700: oklch(0.50 0.02 88);
  --clr-warm-800: oklch(0.40 0.02 88);
  --clr-warm-900: oklch(0.28 0.02 88);

  /* Ambre organique — la chaleur */
  --clr-amber-300: oklch(0.86 0.12 82);
  --clr-amber-400: oklch(0.82 0.13 80);
  --clr-amber-500: oklch(0.80 0.132 78);      /* accent dark */
  --clr-amber-600: oklch(0.62 0.13 72);       /* accent light */
  --clr-amber-700: oklch(0.50 0.12 70);       /* accent-ink light */
  --clr-amber-soft: oklch(0.29 0.06 78);      /* tint sur fond sombre */

  /* Vert de croissance — le vivant */
  --clr-green-300: oklch(0.78 0.10 160);
  --clr-green-400: oklch(0.74 0.105 159);
  --clr-green-500: oklch(0.70 0.11 158);      /* growth dark */
  --clr-green-600: oklch(0.50 0.10 158);      /* growth light */
  --clr-green-700: oklch(0.44 0.10 158);      /* growth-ink light */
  --clr-green-soft: oklch(0.27 0.055 158);    /* tint sur fond sombre */

  /* États */
  --clr-danger-400: oklch(0.68 0.18 28);
  --clr-danger-500: oklch(0.63 0.18 28);
  --clr-danger-600: oklch(0.55 0.16 28);
  --clr-danger-soft: oklch(0.30 0.07 28);

  /* Focus */
  --focus-ring: var(--clr-amber-300);
}

/* ---------- 3. Semantic tokens — DARK (défaut) ---------- */
:root {
  --bg: var(--clr-indigo-900);
  --bg-deep: var(--clr-indigo-950);
  --surface: var(--clr-indigo-800);
  --surface-2: var(--clr-indigo-700);
  --surface-glass: oklch(0.22 0.034 266 / 0.72);

  --fg: var(--clr-warm-100);
  --fg-2: oklch(0.86 0.018 88);
  --muted: var(--clr-warm-500);
  --faint: oklch(0.60 0.02 88);

  --border: var(--clr-indigo-600);
  --border-soft: oklch(0.265 0.028 266);
  --hairline: oklch(0.955 0.014 88 / 0.14);

  --accent: var(--clr-amber-500);
  --accent-ink: var(--clr-amber-300);
  --accent-soft: var(--clr-amber-soft);
  --accent-contrast: var(--clr-indigo-950);

  --growth: var(--clr-green-500);
  --growth-ink: var(--clr-green-300);
  --growth-soft: var(--clr-green-soft);
  --growth-contrast: var(--clr-indigo-950);

  --danger: var(--clr-danger-500);
  --danger-ink: var(--clr-danger-400);
  --danger-soft: var(--clr-danger-soft);

  --shadow-card: 0 1px 0 oklch(0 0 0 / 0.25), 0 10px 28px -18px oklch(0 0 0 / 0.55);
  --shadow-lift: 0 1px 0 oklch(0 0 0 / 0.3), 0 22px 44px -20px oklch(0 0 0 / 0.6);
  --shadow-accent: 0 0 0 1px var(--accent), 0 14px 34px -14px oklch(0.8 0.13 78 / 0.4);

  --ring-track: oklch(0.955 0.014 88 / 0.14);
  --ring-progress: var(--growth);
}

/* ---------- 4. Semantic tokens — LIGHT ---------- */
:root[data-theme="light"] {
  --bg: var(--clr-warm-100);
  --bg-deep: var(--clr-warm-200);
  --surface: var(--clr-warm-050);
  --surface-2: var(--clr-warm-200);
  --surface-glass: oklch(0.995 0.004 85 / 0.8);

  --fg: var(--clr-indigo-900);
  --fg-2: oklch(0.41 0.025 266);
  --muted: oklch(0.53 0.02 266);
  --faint: oklch(0.62 0.02 266);

  --border: var(--clr-warm-300);
  --border-soft: oklch(0.93 0.01 85);
  --hairline: oklch(0.26 0.03 266 / 0.12);

  --accent: var(--clr-amber-600);
  --accent-ink: var(--clr-amber-700);
  --accent-soft: oklch(0.90 0.05 78);
  --accent-contrast: var(--clr-warm-050);

  --growth: var(--clr-green-600);
  --growth-ink: var(--clr-green-700);
  --growth-soft: oklch(0.90 0.04 158);
  --growth-contrast: var(--clr-warm-050);

  --danger: var(--clr-danger-600);
  --danger-ink: var(--clr-danger-600);
  --danger-soft: oklch(0.93 0.04 28);

  --shadow-card: 0 1px 2px oklch(0.26 0.03 266 / 0.06), 0 10px 24px -14px oklch(0.26 0.03 266 / 0.18);
  --shadow-lift: 0 2px 4px oklch(0.26 0.03 266 / 0.08), 0 18px 38px -16px oklch(0.26 0.03 266 / 0.22);
  --shadow-accent: 0 0 0 1px var(--accent), 0 14px 30px -14px oklch(0.62 0.13 72 / 0.35);

  --ring-track: oklch(0.26 0.03 266 / 0.14);
  --ring-progress: var(--growth);
}

/* ---------- 5. Typography ---------- */
:root {
  /* Le vivant : voix éditoriale (display + corps) */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Newsreader", "Iowan Old Style", Georgia, serif;
  /* Le système : voix technique */
  --font-mono: "Spline Sans Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Chargement (Google Fonts) — à réutiliser dans chaque artefact :
     https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Spline+Sans+Mono:wght@400;500;600&display=swap */

  /* Échelle */
  --text-3xs: 0.6875rem;  /* 11px — annotations fines */
  --text-2xs: 0.75rem;    /* 12px — mono labels */
  --text-xs: 0.8125rem;   /* 13px — captions, code */
  --text-sm: 0.9375rem;   /* 15px — petit corps */
  --text-base: 1.0625rem; /* 17px — corps */
  --text-lg: 1.3125rem;   /* 21px — lead */
  --text-xl: 1.75rem;     /* 28px — h3 */
  --text-2xl: 2.25rem;    /* 36px — h2 */
  --text-3xl: clamp(2.75rem, 6vw, 4.75rem); /* display */
  --text-4xl: clamp(3.5rem, 8vw, 6.5rem);   /* manifeste */

  --leading-tight: 1.02;
  --leading-snug: 1.12;
  --leading-normal: 1.3;
  --leading-body: 1.62;

  --tracking-tight: -0.02em;
  --tracking-label: 0.16em;
  --tracking-code: 0.02em;

  --weight-display: 520;
  --weight-body: 400;
  --weight-mono: 500;
  --weight-bold: 620;
}

/* ---------- 6. Spacing, radius, layout ---------- */
:root {
  /* Grille 8pt */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  --border-1: 1px;
  --border-2: 2px;

  --grid-baseline: 8px;
}

/* ---------- 7. Motif : anneaux & noyau (le vivant qui apprend) ---------- */
:root {
  --motif-rings: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0 15px,
    var(--hairline) 15px 15.5px,
    transparent 15.5px 31px
  );
  --motif-rings-tight: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0 6px,
    var(--hairline) 6px 6.25px,
    transparent 6.25px 13px
  );
  --motif-grid: repeating-linear-gradient(
      to bottom, var(--hairline) 0 1px, transparent 1px 48px
    ),
    repeating-linear-gradient(
      to right, var(--hairline) 0 1px, transparent 1px 48px
    );
  --motif-dots: radial-gradient(var(--hairline) 1px, transparent 1.5px);
  --motif-dots-size: 26px 26px;
}

/* ============================================================
   8. Base & helpers
   ============================================================ */
.syn, .syn * { box-sizing: border-box; }

.syn {
  --font-body: "Newsreader", "Iowan Old Style", Georgia, serif;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg);
  background: var(--bg);
  font-variation-settings: "opsz" 12;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.syn h1, .syn h2, .syn h3, .syn h4 {
  font-family: var(--font-display);
  color: var(--fg);
  font-weight: var(--weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.syn h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
.syn h2 { font-size: var(--text-2xl); }
.syn h3 { font-size: var(--text-xl); }
.syn h4 { font-size: var(--text-lg); }

.syn p { margin: 0; }
.syn a { color: var(--accent-ink); text-underline-offset: 3px; }
.syn em { font-style: italic; }
.syn strong { font-weight: var(--weight-bold); }

.syn code, .syn pre, .syn kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-code);
}

.syn .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.syn .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- 9. Eyebrows & labels (le « système ») ---------- */
.syn .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--eyebrow-color, var(--accent-ink));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.syn .eyebrow::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--eyebrow-color, var(--accent));
  display: inline-block;
}

.syn .tag {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.syn .tag--accent { color: var(--accent-ink); border-color: color-mix(in oklch, var(--accent) 45%, transparent); }
.syn .tag--growth { color: var(--growth-ink); border-color: color-mix(in oklch, var(--growth) 45%, transparent); }

.syn .meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-code);
  color: var(--muted);
}

/* ---------- 10. Buttons ---------- */
.syn .button {
  --btn-h: 46px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 0 var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.syn .button:active { transform: translateY(1px); }

.syn .button--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.syn .button--primary:hover {
  background: oklch(from var(--accent) l calc(c + 0.02) calc(h + 3));
  border-color: oklch(from var(--accent) l calc(c + 0.02) calc(h + 3));
}

.syn .button--secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--border);
}
.syn .button--secondary:hover {
  background: var(--surface-2);
  border-color: var(--fg-2);
}

.syn .button--ghost {
  background: transparent;
  color: var(--accent-ink);
  border-color: transparent;
}
.syn .button--ghost:hover {
  background: var(--accent-soft);
  border-color: oklch(from var(--accent) l c h / 0.35);
}

.syn .button--block { width: 100%; }

/* ---------- 11. Cards ---------- */
.syn .card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-card);
}
.syn .card--frame {
  border-radius: var(--radius-none);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: none;
  border-right: none;
  box-shadow: none;
  background: transparent;
  padding: var(--space-8) 0;
}
.syn .card--growth {
  border-color: oklch(from var(--growth) l c h / 0.35);
  position: relative;
}
.syn .card--growth::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 3px;
  background: var(--growth);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.syn .card--stat { text-align: left; }

/* ---------- 12. Stat & numbers ---------- */
.syn .stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 520;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variation-settings: "opsz" 72;
}
.syn .stat-value--accent { color: var(--accent-ink); }
.syn .stat-value--growth { color: var(--growth-ink); }
.syn .stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--space-3);
  display: block;
}

/* ---------- 13. Quote (voix éditoriale) ---------- */
.syn .quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 400;
  font-style: italic;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  font-variation-settings: "opsz" 32;
  border-left: 2px solid var(--accent);
  padding-left: var(--space-8);
}
.syn .quote cite {
  display: block;
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 14. Inputs & forms (interface) ---------- */
.syn .field { display: flex; flex-direction: column; gap: var(--space-2); }
.syn .field label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}
.syn .field input,
.syn .field textarea,
.syn .field select {
  height: 46px;
  padding: 0 var(--space-4);
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.syn .field textarea { height: auto; padding: var(--space-3) var(--space-4); min-height: 110px; resize: vertical; }
.syn .field input:focus, .syn .field textarea:focus, .syn .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.28);
}

/* ---------- 15. Table (données) ---------- */
.syn .table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.syn .table th {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--weight-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.syn .table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg-2);
}
.syn .table td:first-child { color: var(--fg); }
.syn .table tbody tr:hover td { background: var(--surface-2); }

/* ---------- 16. Focus visible (accessibilité) ---------- */
.syn :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.syn .button:focus-visible { outline-offset: 3px; }

/* ---------- 17. Motion (courte, déterminée) ---------- */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
}

/* ---------- 18. Accessibilité & préférences ---------- */
@media (prefers-reduced-motion: reduce) {
  .syn *, .syn *::before, .syn *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}