/* Couche 1 — sémantique (éléments d'information) */
:root {
  --tf-semantic-info: #0369a1;
  --tf-semantic-ok: #059669;
  --tf-semantic-warn: #ca8a04;
  --tf-semantic-gap: #ea580c;
  --tf-semantic-error: #dc2626;
  --tf-semantic-human: #db2777;
  --tf-semantic-expert: #7c3aed;

  /* Couche 2 — marque tranchée (light blanc vrai) */
  --tf-bg: #ffffff;
  --tf-surface: #ffffff;
  --tf-surface-elevated: #f8fafc;
  --tf-text: #0f172a;
  --tf-text-muted: #64748b;
  --tf-border: #e2e8f0;
  --tf-brand: var(--tf-semantic-info);
  --tf-brand-muted: #e0f2fe;

  --proof-valid: var(--tf-semantic-ok);
  --proof-missing: var(--tf-semantic-warn);
  --proof-warning: var(--tf-semantic-gap);
  --proof-error: var(--tf-semantic-error);
  --proof-computed: var(--tf-semantic-info);
  --proof-action: var(--tf-semantic-info);

  --tf-font-sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --tf-font-display: 'Fraunces', Georgia, serif;
  --tf-font-scale: 1;
  --tf-line-height: 1.5;
  --tf-letter-spacing: 0;
  --tf-spacing-scale: 1;
  --tf-touch-min: 44px;
  --tf-luminosity: 1;
  --tf-color-mode: 0; /* 0 tranché, 50 pastel, 100 mono */
  --tf-motion: 1;
  --tf-density-pad: 1rem;
  --tf-depth: 50;
  --tf-guide: 50;
  --tf-persist: 50;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --tf-bg: #020617;
    --tf-surface: #0f172a;
    --tf-surface-elevated: #1e293b;
    --tf-text: #f1f5f9;
    --tf-text-muted: #94a3b8;
    --tf-border: #334155;
    --tf-brand: #38bdf8;
    --tf-brand-muted: #0c4a6e;
  }
}

:root[data-theme='dark'] {
  --tf-bg: #020617;
  --tf-surface: #0f172a;
  --tf-surface-elevated: #1e293b;
  --tf-text: #f1f5f9;
  --tf-text-muted: #94a3b8;
  --tf-border: #334155;
  --tf-brand: #38bdf8;
  --tf-brand-muted: #0c4a6e;
}

:root[data-theme='light'] {
  --tf-bg: #ffffff;
  --tf-surface: #ffffff;
  --tf-surface-elevated: #f8fafc;
  --tf-text: #0f172a;
  --tf-text-muted: #64748b;
  --tf-border: #e2e8f0;
  --tf-brand: #0369a1;
  --tf-brand-muted: #e0f2fe;
}

/* Couche 3 — inclusion overrides (appliqués via data-inclusion + classes) */
:root[data-color-mode='pastel'] {
  --tf-semantic-info: #7dd3fc;
  --tf-semantic-ok: #6ee7b7;
  --tf-semantic-warn: #fde68a;
  --tf-semantic-gap: #fdba74;
  --tf-semantic-error: #fca5a5;
  --tf-semantic-human: #f9a8d4;
  --tf-semantic-expert: #c4b5fd;
  --tf-brand: #7dd3fc;
}

:root[data-color-mode='mono'] {
  --tf-semantic-info: #525252;
  --tf-semantic-ok: #404040;
  --tf-semantic-warn: #737373;
  --tf-semantic-gap: #525252;
  --tf-semantic-error: #171717;
  --tf-semantic-human: #404040;
  --tf-semantic-expert: #262626;
  --tf-brand: #404040;
  --tf-brand-muted: #e5e5e5;
}

:root[data-luminosity='dim'] {
  --tf-bg: #e2e8f0;
  --tf-surface: #f1f5f9;
}

:root[data-luminosity='dark'] {
  --tf-bg: #0f172a;
  --tf-surface: #1e293b;
  --tf-text: #f1f5f9;
  --tf-text-muted: #94a3b8;
  --tf-border: #334155;
}

:root[data-luminosity='noir'] {
  --tf-bg: #000000;
  --tf-surface: #0a0a0a;
  --tf-text: #fafafa;
  --tf-text-muted: #a3a3a3;
  --tf-border: #262626;
  --tf-brand: #e5e5e5;
}

body {
  background-color: var(--tf-bg);
  color: var(--tf-text);
  font-family: var(--tf-font-sans);
  line-height: var(--tf-line-height);
  letter-spacing: var(--tf-letter-spacing);
  font-size: calc(16px * var(--tf-font-scale, 1));
}

.tf-console-surface {
  background: var(--tf-surface);
  border-color: var(--tf-border);
  color: var(--tf-text);
}

.tf-brand-accent {
  color: var(--tf-brand);
}

.tf-touch-target {
  min-height: var(--tf-touch-min);
  min-width: var(--tf-touch-min);
}

.tf-density-pad {
  padding: calc(var(--tf-density-pad) * var(--tf-spacing-scale, 1));
}

.tf-high-contrast {
  --tf-border: #0f172a;
  --tf-text-muted: #334155;
}

.tf-high-contrast body {
  filter: contrast(1.2);
}

.tf-reduced-motion *,
.tf-reduced-motion *::before,
.tf-reduced-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.tf-reduced-motion .backdrop-blur,
.tf-reduced-motion [class*='backdrop-blur'] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .backdrop-blur,
  [class*='backdrop-blur'] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

.tf-dyslexia-font,
.tf-dyslexia-font body {
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
}

.tf-underline-links a {
  text-decoration: underline !important;
}

.tf-focus-enhanced :focus-visible {
  outline: 3px solid var(--tf-semantic-info) !important;
  outline-offset: 2px;
}

.tf-text-justify p,
.tf-text-justify li {
  text-align: justify;
}

.tf-guide-on [data-tf-guide] {
  outline: 1px dashed var(--tf-semantic-human);
  outline-offset: 2px;
}

.tf-sr-enhanced [aria-hidden='true']:not(.tf-keep-hidden) {
  /* screen-reader depth: decorative stay hidden; landmarks stay */
}

.tf-no-drag [draggable='true'] {
  pointer-events: none;
}

.tf-no-timer [data-countdown],
.tf-no-timer .tf-countdown {
  display: none !important;
}

.tf-predictable header,
.tf-predictable nav {
  position: sticky;
  top: 0;
}

.tf-lang-pictos .tf-expert-copy {
  display: none;
}

.tf-lang-expert .tf-picto-copy {
  display: none;
}

.tf-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: local('OpenDyslexic'), local('OpenDyslexic Regular');
  font-display: swap;
}