/* ==========================================================================
   BASE — CSS Reset + Typography Foundation
   ==========================================================================
   Modern, less-aggressive reset (vs. * { margin: 0; padding: 0; }).
   Self-hosted Satoshi with system fallback when /assets/fonts is missing.
   Heading scale + utility classes.
   ========================================================================== */

/* -----------------------------------------------------------------------
   FONTS — Satoshi (self-hosted, woff2) with system stack fallback.
   No external @import: avoids the render-blocking Google Fonts request.
   The `<link rel="preload" as="font">` declared in the HTML for the
   non-blocking load.
   ----------------------------------------------------------------------- */
/* Satoshi — 4 pesos estáticos self-hosted en /public/fonts/ */
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

/* DM Sans — variable font (un solo archivo cubre 400/500/600/700) */
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-latinExt.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -----------------------------------------------------------------------
   MODERN CSS RESET
   Andy Bell base, with surgical defaults preserved.
   ----------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

*:where(:not(fieldset, progress, details > summary:first-of-type)) {
  margin: 0;
  padding: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  min-height: 100vh;
  font-family: var(--fa-font-body);
  font-size: var(--fa-size-body-lg);
  font-weight: var(--fa-weight-body);
  line-height: var(--fa-lh-body-lg);
  color: var(--fa-color-text-primary);
  background-color: var(--fa-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

a {
  color: var(--fa-color-primary);
  text-decoration: none;
  text-decoration-skip-ink: auto;
  transition: color var(--fa-motion-fast) var(--fa-ease-out);
}
a:hover {
  color: var(--fa-color-primary-hover);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  text-wrap: balance; /* Premium: avoids orphans/widows in headings */
}

abbr[title] {
  text-decoration: none;
}

/* -----------------------------------------------------------------------
   HEADING SCALE
   ----------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fa-font-display);
  color: var(--fa-color-text-primary);
  text-wrap: balance;
}

h1 { font-size: var(--fa-size-h1);   font-weight: var(--fa-weight-h1); line-height: var(--fa-lh-h1); letter-spacing: var(--fa-ls-h1); }
h2 { font-size: var(--fa-size-h2);   font-weight: var(--fa-weight-h2); line-height: var(--fa-lh-h2); letter-spacing: var(--fa-ls-h2); }
h3 { font-size: var(--fa-size-h3);   font-weight: var(--fa-weight-h3); line-height: var(--fa-lh-h3); letter-spacing: var(--fa-ls-h3); }
h4 { font-size: var(--fa-size-h4);   font-weight: var(--fa-weight-h4); line-height: var(--fa-lh-h4); letter-spacing: var(--fa-ls-h4); }
h5 { font-size: var(--fa-size-h5);   font-weight: var(--fa-weight-h5); line-height: var(--fa-lh-h5); letter-spacing: var(--fa-ls-h5); }
h6 { font-size: var(--fa-size-h6);   font-weight: var(--fa-weight-h6); line-height: var(--fa-lh-h6); letter-spacing: var(--fa-ls-h6); }

@media (max-width: 767px) {
  h1 { font-size: 36px; letter-spacing: -0.02em; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }
  h4 { font-size: 18px; }
  h5 { font-size: 16px; }
  h6 { font-size: 14px; }
}

/* -----------------------------------------------------------------------
   TEXT UTILITY CLASSES
   ----------------------------------------------------------------------- */
.text-primary   { color: var(--fa-color-text-primary); }
.text-secondary { color: var(--fa-color-text-secondary); }
.text-tertiary  { color: var(--fa-color-text-tertiary); }
.text-ai        { color: var(--fa-color-ai); }
.text-success   { color: var(--fa-color-success); }
.text-error     { color: var(--fa-color-error); }

/* -----------------------------------------------------------------------
   TABULAR NUMBERS
   ----------------------------------------------------------------------- */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on, 'lnum' on;
  font-family: var(--fa-font-mono);
}

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

/* -----------------------------------------------------------------------
   SELECTION — Brand-colored text selection
   ----------------------------------------------------------------------- */
::selection {
  background-color: var(--fa-color-primary);
  color: var(--fa-color-text-inverse);
}
::-moz-selection {
  background-color: var(--fa-color-primary);
  color: var(--fa-color-text-inverse);
}

/* -----------------------------------------------------------------------
   FOCUS VISIBLE — Accessible focus ring using primary color
   ----------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--fa-color-primary);
  outline-offset: 3px;
  border-radius: var(--fa-radius-sm);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* -----------------------------------------------------------------------
   SCROLLBAR — Subtle custom scrollbar (Webkit + Firefox)
   ----------------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--fa-color-surface-0); }
::-webkit-scrollbar-thumb {
  background: var(--fa-color-surface-3);
  border-radius: var(--fa-radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--fa-color-text-tertiary); }
* { scrollbar-width: thin; scrollbar-color: var(--fa-color-surface-3) var(--fa-color-surface-0); }

/* -----------------------------------------------------------------------
   REDUCED MOTION — Base-level overrides
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}