/* ==================================================================
   Frugio — frugio-ui.css : l'identité partagée « Sashiko » (DESIGN.md)
   Fil écru sur toile indigo. Sombre = défaut « toile », clair = « lin »
   (inversion exacte). Composants cousus : bordures pointillées fines,
   bouton principal plein fil. Mouvement conservé (ressorts, cascade,
   View Transitions) mais fluide textile — plus de steps() pixel.
   Chargé AVANT pages.css. Source unique des jetons.
   ================================================================== */

/* ---------------- Polices (OFL, latin, woff2) ---------------- */
@font-face {
  font-family: 'Zen Maru Gothic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/zenmaru-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/atkinson-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/atkinson-700.woff2') format('woff2');
}

/* ---------------- Jetons — sombre « toile indigo » (DÉFAUT) -------- */
:root {
  /* Palette sashiko */
  --paper: #17263b;          /* toile aizome */
  --ink: #ede4d3;            /* fil écru */
  --thread: #ede4d3;
  --thread-2: #d8cbb2;       /* fil secondaire */
  --garance: #d9573f;        /* LE rouge — un seul endroit par écran */

  /* Rôles hérités (compatibilité composants existants) */
  --bg: var(--paper);
  --surface: #1f3150;
  --surface-2: #24365a;
  --text: var(--ink);
  --text-muted: #8fa3c2;
  --text-faint: #5e729a;
  --accent: var(--thread);
  --accent-ink: #17263b;
  --accent-soft: #2b4066;
  --danger: var(--garance);
  --error: var(--garance);
  --ok: #8fbf9f;
  /* Alias hérités de l'identité précédente (composants existants). */
  --violet: var(--thread);
  --violet-milk: var(--accent-soft);
  --gold: var(--garance);
  --signal: var(--garance);

  /* Jetons du moteur de jeu (toile + fils) */
  --board-bg: #17263b;
  --cell-bg: #1f3150;
  --cell-bg-alt: #223756;
  --grid-line: #2b4066;
  --grid-line-bold: #3a5178;
  --cell-ink: #ede4d3;
  --cell-thread: #d8cbb2;
  --cell-mark: #7e92b5;
  --cell-hover: rgba(237, 228, 211, 0.07);
  --clue-ink: #8fa3c2;
  --clue-done: #3e547a;
  --clue-bg: #17263b;

  /* Typographie : 3 rôles */
  --font-display: 'Zen Maru Gothic', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --font-data: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', monospace;

  /* Géométrie cousue */
  --stitch: 1.5px dashed var(--text-faint);   /* bordure « cousue » */
  --stitch-strong: 1.5px dashed var(--text-muted);
  --r: 6px;                                    /* rayon discret, jamais gros */
  --spring: cubic-bezier(0.3, 1.6, 0.5, 1);
  --soft: cubic-bezier(0.22, 0.61, 0.36, 1);   /* fluide textile */
  --weave: rgba(237, 228, 211, 0.035);         /* trame de fond */
}

/* ---------------- Clair « lin naturel » (inversion exacte) -------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --paper: #f2ede2; --ink: #24365a;
    --thread: #24365a; --thread-2: #45587e;
    --garance: #c2452f;
    --surface: #faf7ef; --surface-2: #e9e2d2;
    --text-muted: #5e729a; --text-faint: #8fa3c2;
    --accent-ink: #f2ede2; --accent-soft: #e4dcc9;
    --ok: #3e7d58;
    --board-bg: #f2ede2; --cell-bg: #faf7ef; --cell-bg-alt: #f2ecdd;
    --grid-line: #d8d0bf; --grid-line-bold: #b8ae97;
    --cell-ink: #24365a; --cell-thread: #45587e; --cell-mark: #5e729a;
    --cell-hover: rgba(36, 54, 90, 0.07);
    --clue-ink: #3e547a; --clue-done: #b8ae97; --clue-bg: #f2ede2;
    --weave: rgba(36, 54, 90, 0.04);
  }
}
:root[data-theme='light'] {
  --paper: #f2ede2; --ink: #24365a;
  --thread: #24365a; --thread-2: #45587e;
  --garance: #c2452f;
  --surface: #faf7ef; --surface-2: #e9e2d2;
  --text-muted: #5e729a; --text-faint: #8fa3c2;
  --accent-ink: #f2ede2; --accent-soft: #e4dcc9;
  --ok: #3e7d58;
  --board-bg: #f2ede2; --cell-bg: #faf7ef; --cell-bg-alt: #f2ecdd;
  --grid-line: #d8d0bf; --grid-line-bold: #b8ae97;
  --cell-ink: #24365a; --cell-thread: #45587e; --cell-mark: #5e729a;
  --cell-hover: rgba(36, 54, 90, 0.07);
  --clue-ink: #3e547a; --clue-done: #b8ae97; --clue-bg: #f2ede2;
  --weave: rgba(36, 54, 90, 0.04);
}

/* ---------------- Base : la toile ---------------- */
body {
  background-color: var(--bg);
  /* Trame de tissu ultra-subtile : hairlines, aucune image. */
  background-image:
    linear-gradient(var(--weave) 1px, transparent 1px),
    linear-gradient(90deg, var(--weave) 1px, transparent 1px);
  background-size: 14px 14px;
  font-family: var(--font-body);
  color: var(--text);
}
@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color 0.4s ease, color 0.4s ease; }
}
::selection { background: var(--thread); color: var(--accent-ink); }

/* Rôle données : chiffres qui ne dansent jamais */
.t-data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ---------------- La tuile cousue (élément signature) ----------
   Surface pleine pour la lecture; bordure pointillée fine (le cousu)
   pour tout ce qui s'actionne. Zéro ombre, zéro gros arrondi.      */
.nt {
  background: var(--surface);
  border: var(--stitch);
  border-radius: var(--r);
}
.nt-milk { background: var(--accent-soft); }
.nt-ghost { background: transparent; }
.nt-flat { border: none; }

/* ---------------- Boutons ---------------- */
.px-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 20px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-ink);
  background: var(--thread);            /* principal : plein fil */
  border: 1.5px solid var(--thread);
  border-radius: var(--r);
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
}
.px-btn.ghost {
  background: transparent;
  border: var(--stitch-strong);
  color: var(--text);
}
.px-btn:disabled { opacity: 0.45; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .px-btn, .nt-press { transition: transform 0.16s var(--spring); }
}
.px-btn:active, .nt-press:active { transform: scale(0.97); }

/* ---------------- Focus clavier : le fil de contour ---------------- */
:focus-visible { outline: 2px dashed var(--thread); outline-offset: 3px; }

/* ---------------- Cascade de révélation (conservée, fluide) -------- */
@keyframes rv-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}
.rv-run { animation: rv-in 0.45s var(--spring) both; animation-delay: calc(var(--i, 0) * 10ms); }
@media (prefers-reduced-motion: reduce) {
  .rv-run { animation: none; }
}

/* ---------------- Transitions de page : fondu textile -------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
  ::view-transition-old(root) { animation: vt-out 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  ::view-transition-new(root) { animation: vt-in 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
}

/* ---------------- Loader : trois points qui se cousent ------------- */
.px-loader {
  display: inline-grid;
  grid-template-columns: repeat(3, 9px);
  gap: 5px;
}
.px-loader i { width: 9px; height: 9px; border-radius: 50%; background: var(--thread); animation: px-blink 1s ease-in-out infinite; }
.px-loader i:nth-child(2) { animation-delay: 0.32s; }
.px-loader i:nth-child(3) { animation-delay: 0.64s; }
@keyframes px-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .px-loader i { animation: none; } }

/* ---------------- Icônes fil ---------------- */
.pxi { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; flex: none; }

/* ---------------- Impression ---------------- */
@media print {
  body { background-image: none; }
}