/* ============================================
   RESTOCK — Tokens y base (rediseño iOS/macOS)
   ============================================ */
:root {
  /* Color */
  --paper: #F5F5F7;
  --surface: #FFFFFF;
  --ink: #1D1D1F;
  --ink-muted: #6E6E73;
  --line: #D2D2D7;

  --brand: #007AFF;        /* color de acción único */
  --brand-dark: #0062CC;   /* estado hover/pressed */
  --brand-tint: #E8F1FF;

  --heading-color: #1D1D1F; /* mismo tono que el texto: la jerarquía la da el peso, no el color */
  --label-color: #6E6E73;   /* eyebrows/etiquetas pequeñas: gris, nunca un color con significado */

  --amber: #FF9500;        /* exclusivamente advertencia */
  --amber-tint: #FFF1DE;

  --danger: #FF3B30;
  --danger-tint: #FFE5E3;

  --success: #34C759;
  --success-tint: #E3F8E9;

  /* Tipografía: pila de sistema (usa San Francisco de forma nativa en Mac/iOS
     sin necesitar licenciarla ni servirla) con Inter como fallback web. */
  --font-display: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', 'IBM Plex Mono', Menlo, Consolas, monospace;

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* Sombras: muy sutiles, nunca duras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-card: var(--shadow-sm);

  /* Escala de espaciado de referencia (8 / 12 / 16 / 24 / 32 / 40-48) */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 44px;

  /* Layout de la app (sidebar) */
  --sidebar-width: 232px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  display: flex;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* El sidebar se inyecta dentro de #topbarSlot; display:contents hace que sus
   hijos (.sidebar y .mobile-topbar) se comporten como hijos directos de
   body en el layout flex, sin necesitar un wrapper extra. Las páginas de
   autenticación (login/registro/setup...) no cargan este partial y su
   propia clase .auth-bg (más específica) sigue mandando en su body. */
#topbarSlot { display: contents; }

body > main,
body > div:not(#topbarSlot) {
  flex: 1 1 auto;
  min-width: 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--heading-color);
}
h1 { font-size: 26px; }
h2 { font-size: 19px; }

p { margin: 0 0 12px; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.text-muted { color: var(--ink-muted); font-size: 14px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label-color);
  margin: 0 0 8px;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}