/* ==========================================================================
   NEON STRATA — base
   Applique les tokens à la mise en page Quark existante : couleurs,
   typographie, focus. Aucune modification de structure ici.
   ========================================================================== */

html {
  background: var(--c-void);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--c-void);
  color: var(--c-text);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--c-violet);
  color: #fff;
}

/* --- Titres ------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  color: var(--c-text);
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--fs-h2); font-stretch: 125%; text-transform: uppercase; }
h2 { font-size: var(--fs-h2); font-stretch: 112%; text-transform: uppercase; }
h3 { font-size: var(--fs-h3); font-stretch: 110%; font-weight: 700; }
h4, h5, h6 { font-family: var(--f-text); font-weight: 600; letter-spacing: 0; line-height: 1.3; }

p, li, blockquote {
  max-width: var(--measure);
}

/* --- Liens et éléments interactifs -------------------------------------- */

a {
  color: var(--c-violet-glow);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--c-cyan-glow);
}

a, button, [role="button"], summary, label[for], select,
input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"] {
  cursor: pointer;
}

/* Focus visible : outline cyan 2 px (checklist DESIGN.md §9) */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--c-cyan-glow);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

/* --- Code et données ---------------------------------------------------- */

code, kbd, pre, samp {
  font-family: var(--f-mono);
  font-size: 0.9em;
}

/* Label HUD : mono, majuscules, espacé, précédé d'un index ([01], SYS/04) */
.hud {
  color: var(--c-cyan-glow);
  font-family: var(--f-mono);
  font-size: var(--fs-hud);
  font-weight: 500;
  letter-spacing: var(--ls-hud);
  line-height: 1.4;
  text-transform: uppercase;
}

.hud--muted   { color: var(--c-text-muted); }
.hud--signal  { color: var(--c-green-glow); }
.hud--warning { color: var(--c-amber); }

/* --- Formulaires -------------------------------------------------------- */

input, textarea, select {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-1);
  color: var(--c-text);
  font-family: var(--f-text);
}

input::placeholder, textarea::placeholder {
  color: var(--c-text-muted);
}

/* --- Accessibilité ------------------------------------------------------ */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}