/* Inkestia — Design tokens
   Direction : éditorial / institutionnel civic.
   Couleurs basées sur un papier chaud + encre + 1 marine sobre + 1 vermillon "live".
*/

:root {
  /* Surfaces papier */
  --paper:         oklch(0.97 0.008 80);   /* fond principal */
  --paper-2:       oklch(0.99 0.005 80);   /* surfaces (cartes) */
  --paper-3:       oklch(0.94 0.01 80);    /* surfaces enfoncées */
  --paper-warm:    oklch(0.93 0.018 70);   /* zones d'accent doux */

  /* Encres */
  --ink:           oklch(0.18 0.01 80);    /* texte principal */
  --ink-2:         oklch(0.35 0.01 80);    /* texte secondaire */
  --ink-3:         oklch(0.52 0.01 80);    /* texte tertiaire / méta */
  --ink-4:         oklch(0.72 0.008 80);   /* hairlines, ghost text */

  /* Filets */
  --rule:          oklch(0.85 0.008 80);
  --rule-strong:   oklch(0.55 0.01 80);

  /* Accent unique civique */
  --marine:        oklch(0.35 0.06 245);
  --marine-soft:   oklch(0.88 0.04 245);

  /* Live / vermillon (réservé aux signaux temps réel) */
  --vermillon:     oklch(0.58 0.16 30);
  --vermillon-soft:oklch(0.92 0.04 30);

  /* Typo */
  --font-display:  "Instrument Serif", "Source Serif 4", Georgia, serif;
  --font-ui:       "IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --font-mono:     "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Mesures */
  --measure: 60ch;
}

[data-theme="ink"] {
  --paper:         oklch(0.19 0.012 80);
  --paper-2:       oklch(0.22 0.012 80);
  --paper-3:       oklch(0.16 0.012 80);
  --paper-warm:    oklch(0.24 0.018 70);
  --ink:           oklch(0.96 0.008 80);
  --ink-2:         oklch(0.80 0.008 80);
  --ink-3:         oklch(0.65 0.008 80);
  --ink-4:         oklch(0.40 0.008 80);
  --rule:          oklch(0.32 0.008 80);
  --rule-strong:   oklch(0.55 0.01 80);
  --marine-soft:   oklch(0.32 0.05 245);
  --marine:        oklch(0.78 0.06 245);
}

/* Reset léger pour les artboards */
.ink-root, .ink-root * {
  box-sizing: border-box;
}

.ink-root {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.ink-root h1, .ink-root h2, .ink-root h3, .ink-root .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}

.ink-mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.ink-caps { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.ink-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; color: var(--ink-3); }

.ink-rule { height: 1px; background: var(--rule); width: 100%; }
.ink-rule-strong { height: 1px; background: var(--ink); width: 100%; }
.ink-rule-marine { height: 2px; background: var(--marine); width: 100%; }

/* Le point "live" */
.ink-live-dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--vermillon);
  box-shadow: 0 0 0 0 var(--vermillon);
  animation: inkPulse 1.6s ease-out infinite;
  vertical-align: middle;
}
@keyframes inkPulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.58 0.16 30 / 0.4); }
  70%  { box-shadow: 0 0 0 10px oklch(0.58 0.16 30 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.58 0.16 30 / 0); }
}

/* Scan-fall animation pour le flux live */
@keyframes inkScanFall {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ink-scan-row { animation: inkScanFall 0.42s cubic-bezier(.2,.7,.3,1); }

/* Boutons éditoriaux */
.ink-btn {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 2px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: opacity 0.15s;
}
.ink-btn:hover { opacity: 0.85; }
.ink-btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.ink-btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* Carte sobre */
.ink-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

/* Tabular numbers everywhere we count */
.ink-num { font-family: var(--font-mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }