/* ============================================================
   base.css — reset, tokens constantes, tipografía
   Design system: design-system/MASTER.md (fuente de verdad)
   Chrome NEUTRO constante. El acento del tenant llega por CSS
   vars inyectadas en :root desde el layout Blade.
   ============================================================ */

/* ---- Fuente Inter (self-hosted, variable) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
}

/* ---- Tokens constantes (NO tenant) ---- */
:root {
  /* superficies */
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f1f3f5;
  --border:#e2e6ea; --border-strong:#cdd4da;
  /* texto */
  --text:#0f172a; --text-muted:#475569; --text-subtle:#94a3b8;
  /* semánticos */
  --success:#16a34a; --success-bg:#dcfce7;
  --warning:#d97706; --warning-bg:#fef3c7;
  --danger:#dc2626;  --danger-bg:#fee2e2;
  --info:#2563eb;    --info-bg:#dbeafe;
  /* elevación */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 4px 12px rgba(15,23,42,.08);
  --shadow-lg:0 12px 32px rgba(15,23,42,.12);
  --radius:10px; --radius-sm:6px; --radius-lg:16px;

  /* tipografía */
  --font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem;
  --fs-24:1.5rem; --fs-32:2rem;

  /* ritmo de espaciado 4/8 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-8:48px;

  /* layout */
  --sidebar-w:264px; --topbar-h:60px; --content-max:1240px;

  /* fallback tenant (se sobreescribe desde Blade) */
  --primary:#0B0B14; --accent:#FF3D8B; --secondary:#3DE2FF;
  --highlight:#C9A35B; --on-accent:#ffffff;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:#0b0f14; --surface:#121821; --surface-2:#1a2230;
  --border:#222c3a; --border-strong:#33415a;
  --text:#e6edf3; --text-muted:#9fb0c0; --text-subtle:#64748b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:0 12px 32px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
svg { fill: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* ---- Tipografía ---- */
h1,h2,h3,h4 { font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--text); }
h1 { font-size: var(--fs-32); }
h2 { font-size: var(--fs-24); }
h3 { font-size: var(--fs-18); font-weight: 600; }
h4 { font-size: var(--fs-16); font-weight: 600; }
small { font-size: var(--fs-12); }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* texto auxiliar */
.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }

/* ---- Accesibilidad: focus ring constante ---- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.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;
}

.skip-link {
  position: absolute; left: 12px; top: -48px;
  background: var(--surface); color: var(--text);
  padding: 10px 16px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); z-index: 200;
  transition: top .15s ease-out;
}
.skip-link:focus { top: 12px; }

/* ---- Utilidades de capa de hidratación (anti-FOUC) ---- */
[data-hydrate] { opacity: 0; transition: opacity .25s ease-out; }
[data-hydrate].is-ready { opacity: 1; }

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