/* ─────────────────────────────────────────────────────────
 * Otomata — Design tokens (color, type, motion, surfaces)
 * Source of truth: otomata.tech/src/assets/main.css (refonte 05/26)
 *
 * Principles (THEME.md):
 *   1 clair · 1 sombre · 1 primary · 3 sémantiques. Tout le reste est dilution.
 *   Manuscrit chaud — pas de cream papier, pas de cool slate.
 *   Hairlines partout, pas de border-radius par défaut (sauf pills / medallions).
 *   Eyebrows mono uppercase en place des h-tags lourds.
 * ───────────────────────────────────────────────────────── */

/* ─── Google Fonts (Familjen Grotesk + JetBrains Mono) ─── */
@import url("https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

/* ─── (Legacy) Bricolage + Hanken — used by team-viewer / older surfaces ─── */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Hanken+Grotesk:ital,wght@0,300..900;1,300..900&display=swap");

:root {
  /* ════════════════════════════════════════════
   * NEUTRES — un clair lumineux + un encre brun chaud
   * ════════════════════════════════════════════ */
  --color-bg:         #fefcf5; /* fond global — cream, voile jaune léger qui signe Otomata */
  --color-paper:      #fefcf5; /* alias bg */
  --color-paper-2:    #f4ecd2; /* hover, alt rows, soft accent */
  --color-paper-3:    #ebe1ba; /* hover marqué */
  --color-surface:    #ffffff; /* zones de lecture, cards, console */

  --color-ink:        #2c2112; /* encre — brun chaud profond, jamais pur noir */
  --color-ink-soft:   #4a3a23; /* corps de texte secondaire */
  --color-mute:       #7a6c50; /* métadonnées, eyebrows */
  --color-faint:      #aa9f7e; /* désactivé, placeholder */
  --color-hair:       #e9dcb4; /* hairlines / bordures (refonte 05/26) */
  --color-hair-soft:  #f0e6c8; /* hairlines secondaires */

  /* Legacy team-viewer hair tones (plus saturés) — pour compat */
  --color-hair-classic:      #dccfa8;
  --color-hair-classic-soft: #ece1bd;

  /* ════════════════════════════════════════════
   * ACCENTS — 4 couleurs confetti, usage strict (jamais en aplat large)
   * ════════════════════════════════════════════ */
  --color-saffron:     #f0b41e; /* jaune-orangé · primary, branding, accents */
  --color-saffron-ink: #5a3b03; /* texte sur fond saffron-soft */
  --color-saffron-soft:#fbe7a8;

  --color-terra:       #d63d0a; /* rouge vermillon · alerte, suppression, weak */
  --color-terra-ink:   #5a1804;
  --color-terra-soft:  #f7cdbb;

  --color-olive:       #8aa620; /* vert chartreuse · success, strong */
  --color-olive-ink:   #3e4c0c;
  --color-olive-soft:  #e6eec0;

  --color-cobalt:      #1f6dba; /* bleu cobalt · info, signal bloquant, focus */
  --color-cobalt-ink:  #0b2e54;
  --color-cobalt-soft: #c4dcf0;

  /* ── Semantic aliases (legacy / @otomata-ui) ── */
  --color-primary:      var(--color-saffron);
  --color-primary-soft: var(--color-saffron-soft);
  --color-primary-ink:  var(--color-saffron-ink);

  --color-strong-mid: #a8c926;        /* team-viewer ADKAR — olive saturé */
  --color-strong-bg:  var(--color-olive-soft);
  --color-strong-ink: var(--color-olive-ink);

  --color-weak-mid:   #e84b16;        /* team-viewer ADKAR — terra saturé */
  --color-weak-bg:    var(--color-terra-soft);
  --color-weak-ink:   var(--color-terra-ink);

  --color-partial-mid: var(--color-saffron);
  --color-partial-bg:  var(--color-saffron-soft);
  --color-partial-ink: var(--color-saffron-ink);

  --color-accent:      var(--color-cobalt);
  --color-accent-soft: var(--color-cobalt-soft);

  /* ════════════════════════════════════════════
   * TYPOGRAPHIE
   * Otomata.tech (refonte 05/26) → Familjen Grotesk solo (italic = display).
   * Team-viewer & @otomata-ui shared package → Hanken + Bricolage.
   * ════════════════════════════════════════════ */
  --font-sans:    "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --font-display: "Familjen Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Legacy stack — for team-viewer-style surfaces */
  --font-sans-classic:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display-classic: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;

  /* ════════════════════════════════════════════
   * MOTION & FOCUS
   * ════════════════════════════════════════════ */
  --t-fast: 180ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* "rise" easing — staggered fades */

  --ring-focus: 2px solid var(--color-cobalt);

  /* ════════════════════════════════════════════
   * GRID TEXTURE (subtle 64px quadrillage)
   * Set on body to fingerprint the Otomata surface.
   * ════════════════════════════════════════════ */
  --grid-line: rgba(44, 33, 18, 0.025);
}

/* ═══════════════════════════════════════════════════════
 * SEMANTIC ELEMENT STYLES — h1/h2/p/code/etc.
 * Tone: lowercase, tight tracking, italic = emphasis.
 * ═══════════════════════════════════════════════════════ */

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  /* Faint quadrillage — fingerprint of Otomata surfaces */
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-attachment: fixed;
}

::selection { background: var(--color-ink); color: var(--color-bg); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ── Display scale ── */
h1, .display-xl {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 6.5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: lowercase;
  color: var(--color-ink);
  margin: 0;
}
h2, .display-l {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-transform: lowercase;
  color: var(--color-ink);
  margin: 0;
}
h3, .display-m {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  letter-spacing: -0.018em;
  line-height: 1.15;
  text-transform: lowercase;
  color: var(--color-ink);
  margin: 0;
}
h4 {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  text-transform: lowercase;
  color: var(--color-ink);
  margin: 0;
}

/* ── Body text ── */
.body-l, .lede {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.55;
  color: var(--color-ink-soft);
}
p, .body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.meta {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 14px;
  color: var(--color-mute);
}
em, .ital { font-style: italic; font-weight: 500; }
strong { color: var(--color-ink); font-weight: 600; }

/* ── Mono eyebrow / kicker / label ── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-mute);
}
.kicker-section {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-terra);
}

/* ── Code / mono ── */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-hair-soft);
  padding: 2px 6px;
  border: 1px solid var(--color-hair);
}

/* ─────────────────────────────────────────────
 * BRAND ELEMENTS — saffron medallion, status dots,
 * pill buttons, hairline surfaces.
 * ─────────────────────────────────────────────  */

.o-medallion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-saffron);
  color: var(--color-ink);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 600;
}
.o-medallion-sm { width: 28px; height: 28px; font-size: 15px; }
.o-medallion-md { width: 34px; height: 34px; font-size: 18px; }
.o-medallion-lg { width: 56px; height: 56px; font-size: 30px; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; }
.dot-saffron { background: var(--color-saffron); }
.dot-terra   { background: var(--color-terra); }
.dot-olive   { background: var(--color-olive); }
.dot-cobalt  { background: var(--color-cobalt); }

.btn-ink {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--color-ink); color: var(--color-bg);
  border: 1px solid var(--color-ink);
  padding: 14px 22px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  border-radius: 999px; text-transform: lowercase; text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.btn-ink:hover { transform: translateY(-1px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--color-ink);
  border: 1px solid var(--color-ink);
  padding: 14px 22px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  border-radius: 999px; text-transform: lowercase; text-decoration: none;
  transition: background var(--t-fast);
}
.btn-ghost:hover { background: var(--color-hair-soft); }

.pill-kpi {
  display: inline-block;
  border: 1px solid var(--color-ink);
  padding: 10px 16px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  color: var(--color-ink);
  border-radius: 999px;
  text-transform: lowercase;
}

.hair    { border: 1px solid var(--color-hair); }
.hair-b  { border-bottom: 1px solid var(--color-hair); }
.hair-t  { border-top: 1px solid var(--color-hair); }
.hair-l  { border-left: 1px solid var(--color-hair); }
.surface { background: var(--color-surface); border: 1px solid var(--color-hair); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: var(--ring-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-hair); }
::-webkit-scrollbar-thumb:hover { background: var(--color-faint); }