/* ============================================================
   Singular Technology — Design Tokens
   Brand Brief v2.0 · Abril 2026
   ============================================================ */

@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/IBMPlexSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }

/* ─── COLOR TOKENS ─────────────────────────────────────── */
:root {
  /* Primarios */
  --color-negro:      #09090A;
  --color-crema:      #F0EDE6;
  --color-teal:       #1A9E7A;

  /* Neutros */
  --color-gris:       #5F5E5A;
  --color-gris-claro: #C8C6C0;

  /* Editoriales (uso restringido) */
  --color-bermellon:  #A32D2D;
  --color-blanco:     #FFFFFF;

  /* Superficies */
  --surface-dark:     var(--color-negro);
  --surface-light:    var(--color-crema);
  --surface-subtle:   #141415;   /* slightly lighter than negro for cards on dark */

  /* Texto */
  --text-primary-dark:   var(--color-crema);   /* texto sobre negro */
  --text-primary-light:  var(--color-negro);   /* texto sobre crema */
  --text-secondary:      var(--color-gris);
  --text-accent:         var(--color-teal);

  /* Bordes */
  --border-dark:   rgba(240, 237, 230, 0.12);
  --border-light:  rgba(9, 9, 10, 0.12);

  /* ─── TYPOGRAPHY TOKENS ──────────────────────────────── */
  --font-primary: 'IBM Plex Sans', system-ui, sans-serif;
  /* GT Sectra no tiene versión libre; usar como class .sectra si se carga custom */
  --font-editorial: 'GT Sectra', Georgia, 'Times New Roman', serif;

  /* Pesos */
  --fw-light:       300;  /* @kind font */
  --fw-regular:     400;  /* @kind font */
  --fw-medium:      500;  /* @kind font */
  --fw-semibold:    600;  /* @kind font */
  --fw-bold:        700;  /* @kind font */

  /* Escala modular (ratio 1.25 — Major Third) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.06em;
  --ls-wider:    0.12em;   /* para "TECHNOLOGY" y versalitas */

  /* Line height */
  --lh-tight:  1.15;  /* @kind font */
  --lh-snug:   1.3;   /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-relaxed:1.7;   /* @kind font */

  /* ─── SPACING TOKENS ─────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ─── BORDER RADIUS ──────────────────────────────────── */
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* ─── CONTROLES DE FORMULARIO (UX tanda 3) ───────────── */
  /* Un solo alto para todo lo que va en una fila: campo, select, fecha,
     hora, botón y píldora, en el panel de la firma y en el de Singular. */
  --alto-control:  40px;
  --radio-control: 8px;
  --letra-control: 14px;

  /* ─── TRANSITIONS ────────────────────────────────────── */
  --transition-fast:   150ms ease;  /* @kind other */
  --transition-normal: 250ms ease;  /* @kind other */
  --transition-slow:   400ms ease;  /* @kind other */
}

/* ─── SEMANTIC ELEMENT STYLES ────────────────────────────── */

body {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-primary-light);
  background-color: var(--surface-light);
  -webkit-font-smoothing: antialiased;
}

body.dark {
  color: var(--text-primary-dark);
  background-color: var(--surface-dark);
}

h1 {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h3 {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
}

h4 {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
}

h5 {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
}

p {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}

.text-accent {
  color: var(--color-teal);
}

.text-secondary {
  color: var(--color-gris);
}

.wordmark {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--text-xl);
  letter-spacing: var(--ls-normal);
}

.wordmark-sub {
  font-family: var(--font-primary);
  font-weight: var(--fw-light);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* ─── UTILITY CLASSES ─────────────────────────────────────── */
.font-light    { font-weight: var(--fw-light); }
.font-regular  { font-weight: var(--fw-regular); }
.font-medium   { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold     { font-weight: var(--fw-bold); }

.italic { font-style: italic; }

.tracking-wide   { letter-spacing: var(--ls-wide); }
.tracking-wider  { letter-spacing: var(--ls-wider); }
.tracking-tight  { letter-spacing: var(--ls-tight); }

/* ─── CAMPOS SOBRE FONDO OSCURO ──────────────────────────── */
/* Login, restablecer la clave, puesta en marcha y el panel de Singular.
   Antes cada una de esas seis pantallas tenía su copia del estilo del campo.
   `:where` deja la especificidad en la de una clase, para que los ajustes
   locales (`.conclave input`, `.filtro input`) sigan ganando. */
.campos-oscuros :where(input:not([type="checkbox"],[type="radio"],[type="file"]),select) {
  width: 100%;
  height: var(--alto-control);
  padding: 0 12px;
  line-height: normal;
  border-radius: var(--radio-control);
  font-size: var(--letra-control);
  font-family: inherit;
  background: rgba(240, 237, 230, 0.04);
  border: 1px solid rgba(240, 237, 230, 0.14);
  color: var(--color-crema);
}
.campos-oscuros :where(input, select):focus {
  outline: none;
  border-color: var(--color-teal);
}