/* ============================================================
   NIMBOO SHOWROOM · Base
   Reset moderno + tipografía global + helpers
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink-1000);
  background: var(--paper);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* ============== TIPOGRAFÍA ============== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-snug);
  color: var(--ink-1000);
}

h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); }

p { line-height: var(--lh-base); }

em { font-style: italic; font-weight: 400; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

button { font-family: inherit; cursor: pointer; }

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

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

ul, ol { list-style: none; }

/* ============== UTILIDADES ============== */

.eyebrow {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 500;
}

.muted { color: var(--ink-500); }
.muted-soft { color: var(--ink-400); }
.deemed { opacity: 0.55; }

.serif { font-family: var(--font-display); font-weight: 300; }
.serif-italic { font-family: var(--font-display); font-weight: 300; font-style: italic; }
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }

.small { font-size: var(--fs-sm); }
.tiny  { font-size: var(--fs-xs); }

.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.row-baseline { display: flex; align-items: baseline; gap: var(--sp-3); }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack-lg { display: flex; flex-direction: column; gap: var(--sp-6); }
.stack-xl { display: flex; flex-direction: column; gap: var(--sp-8); }

.hidden { display: none !important; }
.invisible { visibility: hidden; }

.divider {
  height: 1px;
  background: var(--line);
  border: none;
  margin: var(--sp-6) 0;
}

.divider-strong {
  height: 1px;
  background: var(--line-firm);
  border: none;
  margin: var(--sp-6) 0;
}

/* ============== SCROLLBAR ============== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-200);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* ============== FOCUS ============== */
:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* ============== SELECTION ============== */
::selection {
  background: var(--sage-soft);
  color: var(--sage-text);
}