/* GÉNÉRÉ par livrable.py sync-charte depuis
   20-reviaflow/resources/reviaflow-design-system.md, § 11 (bloc css).
   Ne pas éditer à la main : corriger la charte, puis relancer sync-charte. */

/* ===== Reviaflow — tokens et recettes (charte du 2026-10-26) ===== */

/* @property : rend les bornes du dégradé du bouton animables */
@property --rf-btn-from { syntax: "<color>"; inherits: false; initial-value: #202124; }
@property --rf-btn-to   { syntax: "<color>"; inherits: false; initial-value: #202124; }

:root {
  /* --- Palette brute : gris froids (valeurs relevées sur Attio) --- */
  --rf-black-50: #101010;  --rf-black-100: #1c1d1f; --rf-black-200: #202124;
  --rf-black-300: #232529; --rf-black-400: #2e3238; --rf-black-500: #383e47;
  --rf-black-600: #505967; --rf-black-700: #6f7988; --rf-black-800: #8f99a8;
  --rf-black-900: #a4adba;
  --rf-white-100: #ffffff; --rf-white-200: #fafafb; --rf-white-300: #f3f4f6;
  --rf-white-400: #edeff3; --rf-white-500: #e4e7ec; --rf-white-600: #dee2e7;
  --rf-white-700: #d3d8df; --rf-white-800: #cad0d9; --rf-white-900: #b5bdc9;

  /* --- Accent unique : bleu (décision Arthur 4a) --- */
  --rf-blue-100: #e8f0ff; --rf-blue-200: #c8dcff; --rf-blue-300: #94b9ff;
  --rf-blue-400: #709ff5; --rf-blue-450: #538bf3; --rf-blue-500: #266df0;
  --rf-blue-600: #245bc2; --rf-blue-800: #1a2233;

  /* --- Statuts : la couleur EST le message, jamais un accent --- */
  --rf-green-500: #0fc27b; --rf-green-600: #0db472;
  --rf-red-500: #ff5b59;   --rf-red-600: #f65351;
  --rf-yellow-500: #f5b900; --rf-yellow-600: #dba601; --rf-yellow-700: #ad7c00;

  /* --- Spectre : mesh du logo sans rose ni violet, sections noires SEULEMENT (décision 3a) --- */
  --rf-spectrum-coral: #f66e65; --rf-spectrum-peach: #f2a17a;
  --rf-spectrum-teal: #06dcc1;  --rf-spectrum-blue: #2e8fd5;

  /* --- Rôles, thème clair --- */
  --rf-bg: var(--rf-white-100);
  --rf-bg-secondary: var(--rf-white-200);
  --rf-surface-subtle: var(--rf-white-300);
  --rf-surface: var(--rf-white-400);
  --rf-stroke-weak: var(--rf-white-400);
  --rf-stroke-subtle: var(--rf-white-500);
  --rf-stroke-default: var(--rf-white-700);
  --rf-stroke-strong: var(--rf-white-800);
  --rf-stroke-accent: var(--rf-blue-400);
  --rf-fg: var(--rf-black-100);
  --rf-fg-secondary: var(--rf-black-300);
  --rf-fg-tertiary: var(--rf-black-600);
  --rf-fg-muted: var(--rf-black-700);      /* 2e ton des titres */
  --rf-fg-caption: var(--rf-black-900);
  --rf-fg-disabled: var(--rf-white-700);
  --rf-link: var(--rf-blue-500);
  --rf-link-strong: var(--rf-blue-600);
  --rf-warning-fg: var(--rf-yellow-700);
  --rf-focus-ring: color-mix(in oklab, var(--rf-blue-500) 30%, transparent);
  --rf-badge-bg: var(--rf-blue-100);
  --rf-badge-fg: var(--rf-blue-600);
  --rf-btn-bg: var(--rf-black-200);
  --rf-btn-bg-hover: var(--rf-black-600);
  --rf-btn-border: var(--rf-black-600);
  --rf-btn-fg: var(--rf-white-300);

  /* --- Polices --- */
  --rf-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --rf-font-serif: "Noto Serif", Georgia, serif;
  --rf-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* --- Ombres : 7 niveaux, opacité 1 % → 7 % --- */
  --rf-shadow-1: 0 1px 3px 0 rgb(0 0 0 / 0.01);
  --rf-shadow-2: 0 2px 4px -1px rgb(0 0 0 / 0.02);
  --rf-shadow-3: 0 4px 8px -2px rgb(0 0 0 / 0.03);
  --rf-shadow-4: 0 8px 16px -4px rgb(0 0 0 / 0.04);
  --rf-shadow-5: 0 16px 32px -8px rgb(0 0 0 / 0.05);
  --rf-shadow-6: 0 32px 64px -16px rgb(0 0 0 / 0.06);
  --rf-shadow-7: 0 64px 128px -32px rgb(0 0 0 / 0.07);

  /* --- Mouvement --- */
  --rf-ease: cubic-bezier(0.2, 0, 0, 1);
  --rf-ease-out: cubic-bezier(0, 0, 0, 1);
}

/* --- Rôles, thème sombre : sections noires insérées (ou thème global) --- */
.dark {
  --rf-bg: var(--rf-black-50);
  --rf-bg-secondary: var(--rf-black-100);
  --rf-surface-subtle: var(--rf-black-300);
  --rf-surface: var(--rf-black-400);
  --rf-stroke-weak: var(--rf-black-300);
  --rf-stroke-subtle: var(--rf-black-400);
  --rf-stroke-default: var(--rf-black-700);
  --rf-stroke-strong: var(--rf-black-800);
  --rf-fg: var(--rf-white-100);
  --rf-fg-secondary: var(--rf-white-400);
  --rf-fg-tertiary: var(--rf-white-900);
  --rf-fg-muted: var(--rf-black-800);
  --rf-fg-caption: var(--rf-black-600);
  --rf-fg-disabled: var(--rf-black-700);
  --rf-link: var(--rf-blue-400);
  --rf-link-strong: var(--rf-blue-300);
  --rf-warning-fg: var(--rf-yellow-500);
  --rf-focus-ring: color-mix(in oklab, var(--rf-blue-400) 60%, transparent);
  --rf-badge-bg: var(--rf-blue-450);
  --rf-badge-fg: var(--rf-white-100);
  --rf-btn-bg: var(--rf-black-400);
  --rf-btn-bg-hover: var(--rf-black-500);
  --rf-btn-border: rgb(80 89 103 / 0.5);
  --rf-btn-fg: var(--rf-white-400);
  background: var(--rf-bg);
  color: var(--rf-fg);
}

/* ===== Typographie ===== */
body {
  font-family: var(--rf-font-sans);
  font-weight: 500;                  /* le texte courant est en medium */
  font-size: 1rem; line-height: 1.375rem; letter-spacing: -0.01em;
  color: var(--rf-fg); background: var(--rf-bg);
  -webkit-font-smoothing: antialiased;
}
.rf-display { font-variation-settings: "opsz" 32; }   /* Inter Display = Inter à opsz 32 */
.rf-heading-xl { font-size: 4rem;    line-height: 4rem;    font-weight: 600; letter-spacing: -0.02em; }
.rf-heading-lg { font-size: 3.5rem;  line-height: 3.75rem; font-weight: 600; letter-spacing: -0.015em; }
.rf-heading-md { font-size: 2.5rem;  line-height: 2.75rem; font-weight: 600; letter-spacing: -0.01em; }
.rf-heading-sm { font-size: 2rem;    line-height: 2.25rem; font-weight: 600; letter-spacing: -0.01em; }
.rf-heading-xs { font-size: 1.75rem; line-height: 2.125rem; font-weight: 600; letter-spacing: -0.01em; }
.rf-text-xl { font-size: 1.25rem;  line-height: 1.625rem; letter-spacing: -0.01em; }
.rf-text-lg { font-size: 1.125rem; line-height: 1.5rem;   letter-spacing: -0.01em; }
.rf-text-sm { font-size: 0.875rem; line-height: 1.25rem;  letter-spacing: -0.005em; }
.rf-text-xs { font-size: 0.75rem;  line-height: 1.125rem; letter-spacing: 0; }
.rf-balance { text-wrap: balance; }
.rf-muted { color: var(--rf-fg-muted); }               /* 2e ton d'un titre */
.rf-overline {
  font-variation-settings: "opsz" 32; font-weight: 600;
  font-size: 12px; line-height: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: var(--rf-fg-caption);
}
.rf-quote { font-family: var(--rf-font-serif); font-weight: 400; font-size: 3rem; line-height: 3.25rem; letter-spacing: -0.01em; text-align: center; max-width: 18em; text-wrap: balance; }
.rf-mono { font-family: var(--rf-font-mono); font-variant-numeric: tabular-nums; }   /* code, montants en tableau */
.rf-tabular { font-variant-numeric: tabular-nums; }   /* chiffres clés : Inter, chiffres de largeur fixe */

/* ===== Accents bleus ===== */
.rf-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border-radius: 4px; font-size: 0.75rem; line-height: 1; font-weight: 500;
  background: var(--rf-badge-bg); color: var(--rf-badge-fg);
}
.dark .rf-badge { border-radius: 9999px; padding: 0 8px; }   /* pilule sur fond noir */
.rf-rule-v { border-left: 1px solid var(--rf-blue-500); padding-left: 1.5rem; }
.rf-rule-h { border-top: 1px solid var(--rf-blue-500); padding-top: 1rem; }
a { color: var(--rf-link); text-decoration: none; transition: color 150ms var(--rf-ease); }
a:hover { color: var(--rf-link-strong); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--rf-focus-ring); }

/* ===== Boutons : entrée 50 ms, sortie 300 ms ===== */
.rf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid;
  font: inherit; font-size: 0.875rem; white-space: nowrap; cursor: pointer;
  transition: color 300ms var(--rf-ease), border-color 300ms var(--rf-ease),
              background-color 300ms var(--rf-ease), --rf-btn-from 300ms var(--rf-ease);
}
.rf-btn:hover, .rf-btn:active { transition-duration: 50ms; }
.rf-btn-sm { height: 32px; padding: 0 10px; font-size: 0.75rem; }
.rf-btn-primary {
  --rf-btn-from: var(--rf-btn-bg); --rf-btn-to: var(--rf-btn-bg);
  background-color: var(--rf-btn-bg);
  background-image: radial-gradient(at center -10%, var(--rf-btn-from) 0%, var(--rf-btn-to) 100%);
  border-color: var(--rf-btn-border); color: var(--rf-btn-fg);
}
.rf-btn-primary:hover { --rf-btn-from: var(--rf-btn-bg-hover); color: var(--rf-white-100); }
.rf-btn-outline { background: var(--rf-bg); border-color: var(--rf-stroke-strong); color: var(--rf-fg-secondary); }
.rf-btn-outline:hover { border-color: var(--rf-fg-muted); color: var(--rf-fg-secondary); }   /* couleur répétée : un <a> bouton ne vire pas au bleu des liens */

/* ===== Mise en page ===== */
.rf-frame { max-width: 1280px; margin: 0 auto; border-left: 1px solid var(--rf-stroke-subtle); border-right: 1px solid var(--rf-stroke-subtle); }
.rf-section { border-top: 1px solid var(--rf-stroke-subtle); }
.dark.rf-section { border-top-color: var(--rf-black-400); }
.rf-hero-wash { background: linear-gradient(to bottom, var(--rf-white-100) 0%, #fafafe 45%, #edf2fe 100%); }
.rf-card { background: var(--rf-bg); border: 1px solid var(--rf-stroke-subtle); border-radius: 12px; box-shadow: var(--rf-shadow-2), var(--rf-shadow-4); }

/* ===== Sections noires : stries verticales (texture quasi invisible) ===== */
.rf-streaks {
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.03) 0 1px, transparent 1px 5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, transparent 100%);
}