/* =========================================================================
   TIME MASTER · Design tokens · DESIGN SYSTEM v2 ("vitrina de noche")
   PALETA OFICIAL: «Obsidiana» (aprobada por el usuario el 2026-11-09).
   Monocromo neutro inspirado en Grok: el reloj es lo único con color.
   Fuente: design-system/DESIGN_SYSTEM_v2.md §2. Paleta anterior (grafito +
   azul acero) archivada en archive/frontend-v2-azul-2026-11-09/; la v1
   (marfil + champagne) en archive/frontend-v1-2026-11-04/.
   Los nombres --tm-blue / --tm-slate se conservan por compatibilidad: hoy
   son plata y grafito neutros, no azules.

   Cualquier pantalla nueva debe consumir estas variables, nunca valores
   sueltos. Usa los nombres v2 (bloque 1). El bloque 2 mantiene los nombres
   de v1 como ALIAS para que el CSS existente siga funcionando: su nombre ya
   no describe el color (p. ej. --tm-ivory ahora es el fondo oscuro).
   ========================================================================= */

:root {
  /* ---- 1. Color v2 --------------------------------------------------- */
  /* Fondos */
  --tm-night: #050505;          /* Fondo de página */
  --tm-black: #000000;          /* Negro de marca: hero, footer, bandas */
  --tm-graphite: #0E0E0F;       /* Superficie: tarjetas, header, paneles */
  --tm-graphite-2: #171718;     /* Superficie elevada: inputs, bandas alternas */
  --tm-line: #242426;           /* Bordes y divisores 1px */
  --tm-line-strong: #36363A;    /* Hover de tarjetas y campos */
  /* Acentos neutros (≤5% de la pantalla; nombres heredados de la paleta azul) */
  --tm-slate: #1D1D20;          /* Grafito banda: bandas de confianza, chip activo */
  --tm-slate-deep: #0C0C0D;     /* Obsidiana profunda: degradado del hero, ventana "Me interesa" */
  --tm-blue: #D6D6D6;           /* Plata: foco, enlaces, subrayado activo, iconos. 14.0:1 sobre Noche */
  --tm-blue-ink: #3A3A3D;       /* Acento sobre la vitrina clara. 10.2:1 sobre Porcelana */
  /* Vitrina de producto */
  --tm-porcelain: #F3F3F2;
  /* Texto */
  --tm-text: #FAFAFA;           /* Blanco: texto principal. 19.5:1 */
  --tm-text-2: #A3A3A6;         /* Niebla: secundario. 8.1:1 */
  --tm-text-3: #7E7E83;         /* Humo: leyendas, solo sobre Noche/Grafito. 5.0:1 / 4.8:1 */
  /* Estados (ajustados a fondo oscuro) */
  --tm-success: #7DC49B;
  --tm-error: #F08A7E;
  --tm-error-bg: rgba(240, 138, 126, 0.08);

  /* ---- 2. Alias heredados de v1 (no usar en código nuevo) ------------ */
  --tm-ink: var(--tm-text);            /* era tinta #111 (texto y fondo del botón principal) */
  --tm-ivory: var(--tm-night);         /* era marfil (fondo de página y texto sobre botón) */
  --tm-surface: var(--tm-graphite);    /* era blanco */
  --tm-charcoal: var(--tm-black);      /* footer */
  --tm-text-muted: var(--tm-text-2);
  --tm-border: var(--tm-line);
  --tm-border-strong: var(--tm-line-strong);
  --tm-champagne: var(--tm-blue);      /* acento: ahora azul acero */
  --tm-champagne-hover: #FFFFFF;       /* hover del botón principal (marfil → blanco) y de enlaces */
  --tm-champagne-text: var(--tm-blue); /* texto pequeño de acento */
  --tm-on-dark: var(--tm-text);
  --tm-on-dark-muted: var(--tm-text-2);
  --tm-border-dark: var(--tm-line);

  /* ---- Tipografía ----------------------------------------------------- */
  /* Oficial desde 2026-11-09: «estilo AP» (ver assets/css/type.css).
     Antes: Cormorant Garamond + Inter. */
  --tm-font-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --tm-font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --tm-font-accent: "Crimson Pro", Georgia, serif; /* <em> en títulos */
  --tm-fw-title: 200;    /* h1, h2 */
  --tm-fw-display: 300;  /* h3, modelo, cifras y demás textos en fuente de títulos */
  --tm-fw-body: 350;     /* cuerpo */

  --tm-fs-display: 72px; /* Hero */
  --tm-fs-h1: 56px;      /* Títulos de página */
  --tm-fs-h2: 40px;      /* Títulos de sección */
  --tm-fs-h3: 28px;      /* Subtítulos */
  --tm-fs-model: 24px;   /* Modelo en tarjeta */
  --tm-fs-body: 16px;
  --tm-fs-small: 15px;
  --tm-fs-label: 12px;   /* Botones */
  --tm-fs-eyebrow: 11px; /* Eyebrow / marca */
  --tm-lh-body: 1.65;
  --tm-tracking-label: 0.14em;
  --tm-tracking-eyebrow: 0.16em;

  /* ---- Espaciado ----------------------------------------------------- */
  --tm-s-1: 8px;
  --tm-s-2: 16px;
  --tm-s-3: 24px;
  --tm-s-4: 32px;
  --tm-s-5: 48px;
  --tm-s-6: 80px;
  --tm-s-7: 120px;

  /* ---- Layout -------------------------------------------------------- */
  --tm-container: 1360px;
  --tm-gutter: 20px;          /* 32 tablet / 48 desktop */
  --tm-grid-gap: 16px;        /* 24 desktop */
  --tm-section-y: 96px;       /* 144 desktop */

  /* ---- Forma --------------------------------------------------------- */
  --tm-radius-card: 16px;
  --tm-radius-media: 12px;    /* Vitrina */
  --tm-radius-pill: 999px;
  --tm-radius-input: 12px;
  --tm-shadow-soft: none;     /* v2: tarjetas sin sombra */

  /* Aire interior de la vitrina oscura (pulido final 2026-11-09): la foto
     del reloj nunca toca los bordes. Mismo valor en toda tarjeta de
     producto (Home, Catálogo, relacionadas); un punto más en la imagen
     protagonista (hero de la Home e imagen principal de la Ficha). */
  --tm-media-pad: 16px;
  --tm-media-pad-lg: 20px;

  --tm-btn-h: 52px;
  --tm-btn-h-sm: 40px;
  --tm-input-h: 52px;

  --tm-focus-ring: 0 0 0 3px rgba(214, 214, 214, 0.35);
  --tm-focus-ring-error: 0 0 0 3px rgba(240, 138, 126, 0.25);
  --tm-focus-ring-strong: 0 0 0 3px rgba(214, 214, 214, 0.5);

  /* Elevación al pasar el cursor (pulido 2026-11-09): la MISMA para toda
     superficie que se levanta (tarjeta de producto, pasos, pilares, casas,
     documentos relacionados). Se acompaña de translateY(var(--tm-lift)). */
  --tm-lift: -4px;
  --tm-shadow-lift: 0 28px 48px -28px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.03);
  --tm-shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.6);
  --tm-backdrop: rgba(0, 0, 0, 0.64);

  --tm-header-offset: 112px;

  /* ---- Movimiento ---------------------------------------------------- */
  --tm-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --tm-dur: 240ms;
  --tm-dur-slow: 400ms;

  /* Un solo tema (oscuro): controles nativos y barras de scroll oscuros */
  color-scheme: dark;
}

@media (min-width: 600px) {
  :root { --tm-gutter: 32px; }
}
@media (min-width: 1024px) {
  :root {
    --tm-gutter: 48px;
    --tm-grid-gap: 24px;
    --tm-section-y: 144px;
  }
}

@media (max-width: 599px) {
  :root {
    --tm-media-pad: 12px;
    --tm-media-pad-lg: 16px;
    --tm-fs-display: 44px;
    --tm-fs-h1: 38px;
    --tm-fs-h2: 30px;
    --tm-fs-h3: 24px;
    --tm-fs-model: 22px;
    --tm-fs-body: 15px;
  }
}