/* ============================================================
   NINJA* (lafour_theme) — base.css
   Tokens + reset. Single source of truth for every component.
   Hybrid: Design Kit § 01 palette/motion + brief additions.

   Brand red --c-brand is RESERVED for meaningful accents only:
   active states, focus rings, error, dot markers, action-link
   fill, dropbutton fill, throbber, selected rows, slider stripe,
   nav underline, wordmark dot. Never as body fill, large
   background or decorative gradient.
   ============================================================ */

:root {
  /* ── Palette (Design Kit § 01) ─────────────────────────── */
  --c-bg:         #0a0a0a;
  --c-surface:    #111111;
  --c-surface-2:  #161616;
  --c-text:       #f0ede8;
  --c-muted:      rgba(240, 237, 232, 0.45);
  --c-dim:        rgba(240, 237, 232, 0.25);
  --c-border:     rgba(255, 255, 255, 0.08);
  --c-border-2:   rgba(255, 255, 255, 0.16);
  --c-accent:     #f0ede8;

  /* ── Brand (NINJA*) ─────────────────────────────────────── */
  --c-brand:      #e30613;
  --c-brand-dim:  rgba(227, 6, 19, 0.18);

  /* ── Status (carried from §10 messages) ─────────────────── */
  --c-status:     #3aa55d;
  --c-warning:    #fdca40;

  /* ── Type families ──────────────────────────────────────── */
  --font-display: 'Bebas Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Type scale ─────────────────────────────────────────── */
  --text-xs:   0.6875rem;
  --text-sm:   0.75rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.5rem;
  --text-3xl:  4rem;
  --text-4xl:  6rem;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-display: 0.02em;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Layout ─────────────────────────────────────────────── */
  --header-h:      48px;
  --header-h-sticky: 56px;
  --nav-pad:       var(--space-6);
  --container:     1440px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    600ms;

  /* Máscara SVG (marca NINJA*) para throbbers vía CSS mask — data-URI estable */
  --lafour-ninja-throbber-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160.63 165.06'%3E%3Cpath fill='%23fff' d='M126.54,83.01l33.42,26.82-15.23,27.75-40.89-15.16-6.57,42.52h-31.86l-6.08-42.52-42.97,16.21L.16,110.32l34.89-27.31L1.22,56.22l15.65-27.82,42.47,15.19L65.41.12h31.86l6.57,43.47,40.4-15.71,16.23,28.34-33.92,26.79Z'/%3E%3C/svg%3E");
}

/* ── Reset ──────────────────────────────────────────────── */
*:where(:not(#toolbar-administration, #toolbar-administration *)),
*:where(:not(#toolbar-administration *))::before,
*:where(:not(#toolbar-administration *))::after {
  box-sizing: border-box; margin: 0; padding: 0;
}
html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}

::selection { background: var(--c-brand); color: var(--c-text); }

/* ── Focus ring (red, §04 nav-states) ──────────────────── */
:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* ── Visually hidden (a11y) ────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── NINJA* wordmark (server + client substitution) ────── */
.ninja-mark { display: inline; white-space: nowrap; }
.ninja-mark__star {
  color: var(--c-brand);
  font-weight: inherit;
  display: inline;
}