/* ==========================================================================
   Tokens del sistema de diseño de RMTracker Solutions
   Neutros cálidos + un único acento. El color lo aportan los productos.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  src: url("../fonts/Fraunces.b65477430776.woff2") format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter.2bf3d951bf9d.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url("../fonts/JetBrainsMono.7e47e1e38341.woff2") format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* --- Escala de neutros cálidos (matiz ~40°, croma bajo) --- */
  --rm-n-0:   #ffffff;
  --rm-n-25:  #fdfcfa;
  --rm-n-50:  #f8f6f2;
  --rm-n-100: #f1eee8;
  --rm-n-200: #e4dfd6;
  --rm-n-300: #d0c9bd;
  --rm-n-400: #aba294;
  --rm-n-500: #857d70;
  --rm-n-600: #665f55;
  --rm-n-700: #4c4740;
  --rm-n-800: #35312c;
  --rm-n-900: #23201d;
  --rm-n-950: #151310;

  /* --- Tipografía --- */
  --rm-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --rm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rm-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --rm-text-xs:   0.8125rem;
  --rm-text-sm:   0.9062rem;
  --rm-text-base: 1rem;
  --rm-text-lg:   clamp(1.0625rem, 0.2vw + 1rem, 1.1875rem);
  --rm-text-xl:   clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);
  --rm-text-2xl:  clamp(1.5rem, 1.2vw + 1.2rem, 2.125rem);
  --rm-text-3xl:  clamp(2rem, 2.6vw + 1.3rem, 3.25rem);
  --rm-text-4xl:  clamp(2.5rem, 4.6vw + 1.2rem, 4.75rem);

  --rm-leading-tight: 1.08;
  --rm-leading-snug: 1.32;
  --rm-leading-normal: 1.62;
  --rm-measure: 68ch;

  /* --- Espaciado, base 4px --- */
  --rm-space-1: 0.25rem;
  --rm-space-2: 0.5rem;
  --rm-space-3: 0.75rem;
  --rm-space-4: 1rem;
  --rm-space-5: 1.5rem;
  --rm-space-6: 2rem;
  --rm-space-7: 2.5rem;
  --rm-space-8: 3rem;
  --rm-space-9: 4rem;
  --rm-space-10: 5.5rem;
  --rm-space-11: 7rem;
  --rm-space-12: 9rem;

  /* --- Radios contenidos --- */
  --rm-radius-sm: 4px;
  --rm-radius-md: 8px;
  --rm-radius-lg: 12px;
  --rm-radius-pill: 999px;

  /* --- Elevación: solo donde algo flota de verdad --- */
  --rm-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.06);
  --rm-shadow-overlay: 0 8px 32px rgb(0 0 0 / 0.16);

  /* --- Movimiento --- */
  --rm-ease: cubic-bezier(0.2, 0, 0.1, 1);
  --rm-duration-fast: 120ms;
  --rm-duration: 200ms;

  /* --- Tema claro (por defecto) --- */
  --rm-paper: var(--rm-n-25);
  --rm-surface: var(--rm-n-0);
  --rm-surface-sunken: var(--rm-n-100);
  --rm-ink: var(--rm-n-900);
  --rm-ink-muted: #5c554c;
  --rm-ink-subtle: #7b7366;
  --rm-rule: var(--rm-n-200);
  --rm-rule-strong: var(--rm-n-300);
  --rm-accent: #1a4c8b;
  --rm-accent-hover: #123969;
  --rm-accent-ink: var(--rm-n-0);
  --rm-accent-wash: #e8eef7;
  --rm-solid: var(--rm-n-900);
  --rm-solid-hover: var(--rm-n-800);
  --rm-solid-ink: var(--rm-n-25);
}

/* --- Tema oscuro: automático para quien no ha elegido --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --rm-paper: var(--rm-n-950);
    --rm-surface: #1e1b17;
    --rm-surface-sunken: #100e0c;
    --rm-ink: #f5f2ed;
    --rm-ink-muted: #b8b1a6;
    --rm-ink-subtle: #8a8378;
    --rm-rule: #302b25;
    --rm-rule-strong: #443d35;
    --rm-accent: #8fb4e3;
    --rm-accent-hover: #b3cdf0;
    --rm-accent-ink: var(--rm-n-950);
    --rm-accent-wash: #1c2a3d;
    --rm-solid: var(--rm-n-25);
    --rm-solid-hover: var(--rm-n-100);
    --rm-solid-ink: var(--rm-n-950);

    --rm-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3);
    --rm-shadow-overlay: 0 8px 32px rgb(0 0 0 / 0.55);
  }
}

/* --- Tema oscuro: elección explícita, gana sobre el sistema --- */
:root[data-theme='dark'] {
  color-scheme: dark;
  --rm-paper: var(--rm-n-950);
  --rm-surface: #1e1b17;
  --rm-surface-sunken: #100e0c;
  --rm-ink: #f5f2ed;
  --rm-ink-muted: #b8b1a6;
  --rm-ink-subtle: #8a8378;
  --rm-rule: #302b25;
  --rm-rule-strong: #443d35;
  --rm-accent: #8fb4e3;
  --rm-accent-hover: #b3cdf0;
  --rm-accent-ink: var(--rm-n-950);
  --rm-accent-wash: #1c2a3d;
  --rm-solid: var(--rm-n-25);
  --rm-solid-hover: var(--rm-n-100);
  --rm-solid-ink: var(--rm-n-950);

  --rm-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3);
  --rm-shadow-overlay: 0 8px 32px rgb(0 0 0 / 0.55);
}

:root[data-theme='light'] {
  color-scheme: light;
}