/* ============================================================
   TEMARIUS REX — SISTEMA DE DISEÑO · Tokens
   ------------------------------------------------------------
   Mismo lenguaje visual que new.xprintapro.com (Inter, displays
   ligeros y muy tracked, eyebrows en versalitas, tarjetas de 24px,
   botones píldora, sombras suaves, mucho aire) pero con la marca
   de Temarius Rex: azul marino como tinta e inverso, y el dorado
   como ÚNICO acento, usado con cuentagotas.

   Todo lo demás del sitio referencia estas variables. Cambiar la
   marca es cambiar este fichero, nada más.
   ============================================================ */

/* ---- Inter (self-hosted, variable) ---- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../xprintapro/assets/fonts/Inter-Variable.ttf") format("truetype-variations");
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../xprintapro/assets/fonts/Inter-Italic-Variable.ttf") format("truetype-variations");
}
/* Merriweather italic: la segunda línea de los titulares */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

:root {
    /* ========================================================
       MARCA
       ======================================================== */
    --navy-900: #080D16;   /* tinta más profunda: titulares */
    --navy-800: #0F1A2E;   /* navy de marca: superficies inversas */
    --navy-700: #1C2D4A;
    --navy-600: #2C4165;

    --gold-700: #8A6410;   /* dorado legible sobre blanco (texto) */
    --gold-600: #B4850F;   /* hover */
    --gold-500: #D4A017;   /* dorado de marca: rellenos y acentos */
    --gold-400: #F0B400;   /* brillo, sobre fondo oscuro */
    --gold-100: #FBF1DA;   /* lavado */

    /* ---- Escala neutra (zinc) ---- */
    --n-0:   #FFFFFF;
    --n-25:  #FCFCFD;
    --n-50:  #FAFAFA;
    --n-100: #F4F4F5;
    --n-200: #E7E7EA;
    --n-300: #D4D4D8;
    --n-400: #8B8B96;   /* subido de #A1A1AA: en texto pequeño no llegaba a 3:1 */
    --n-500: #71717A;
    --n-600: #52525B;
    --n-700: #3F3F46;
    --n-800: #27272A;
    --n-900: #18181B;

    /* ---- Estado ---- */
    --ok-600:   #15803D;
    --ok-500:   #16A34A;
    --ok-wash:  #ECFDF3;
    --warn-600: #B45309;
    --warn-500: #D97706;
    --warn-wash:#FEF6E7;
    --bad-600:  #B91C1C;
    --bad-500:  #DC2626;
    --bad-wash: #FEF2F2;
    --info-600: #1D4ED8;
    --info-500: #2563EB;
    --info-wash:#EFF4FF;

    /* ========================================================
       ALIAS SEMÁNTICOS — es lo que usan los componentes
       ======================================================== */
    --accent:        var(--gold-500);
    --accent-strong: var(--gold-700);   /* acento sobre blanco, legible */
    --accent-hover:  var(--gold-600);
    --accent-wash:   var(--gold-100);

    --surface-page:    var(--n-100);    /* fondo de página */
    --surface-card:    var(--n-0);      /* tarjetas y paneles */
    --surface-subtle:  var(--n-50);     /* cabeceras de tabla, zonas quietas */
    --surface-sunken:  var(--n-100);
    --surface-inverse: var(--navy-800); /* secciones oscuras, pie, navbar CTA */

    --ink:        var(--navy-900);      /* titulares */
    --ink-body:   var(--n-700);         /* texto corrido */
    --ink-muted:  var(--n-500);         /* secundario */
    --ink-faint:  var(--n-400);         /* terciario */
    --ink-invert: var(--n-0);
    --ink-invert-muted: rgba(255,255,255,.66);

    --line:        var(--n-200);        /* borde por defecto */
    --line-strong: var(--n-300);
    --line-invert: rgba(255,255,255,.14);

    --focus: var(--gold-500);

    /* ========================================================
       TIPOGRAFÍA
       ======================================================== */
    --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Merriweather", ui-serif, Georgia, "Times New Roman", serif;
    --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --fw-light: 300;
    --fw-reg:   400;
    --fw-med:   500;
    --fw-semi:  600;
    --fw-bold:  700;

    --fs-micro:   11px;
    --fs-caption: 12px;
    --fs-eyebrow: 13px;
    --fs-sm:      14px;
    --fs-body:    16px;
    --fs-lg:      18px;
    --fs-lead:    20px;
    --fs-h4:      24px;
    --fs-h3:      30px;
    --fs-h2:      40px;
    --fs-display: 48px;
    --fs-hero:    60px;

    --lh-tight:   1.08;
    --lh-snug:    1.25;
    --lh-normal:  1.55;
    --lh-relaxed: 1.72;

    --ls-eyebrow: .17em;
    --ls-display: -.025em;
    --ls-tight:   -.011em;

    /* ========================================================
       ESPACIO, FORMA Y MOVIMIENTO
       ======================================================== */
    --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
    --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
    --s-9: 96px;  --s-10: 128px;

    --r-xs:   6px;
    --r-sm:   10px;
    --r-md:   16px;
    --r-lg:   24px;
    --r-xl:   32px;
    --r-full: 9999px;

    /* Sombras bajas: la marca es casi plana */
    --sh-xs: 0 1px 2px rgba(8,13,22,.05);
    --sh-sm: 0 1px 3px rgba(8,13,22,.07), 0 1px 2px rgba(8,13,22,.04);
    --sh-md: 0 8px 24px rgba(8,13,22,.07);
    --sh-lg: 0 24px 60px rgba(8,13,22,.10);
    --sh-xl: 0 32px 80px rgba(8,13,22,.14);

    --ease:      cubic-bezier(.4, 0, .2, 1);
    --ease-out:  cubic-bezier(.16, 1, .3, 1);
    --dur-fast:  150ms;
    --dur:       250ms;

    /* ---- Retícula ---- */
    --wrap:       1240px;
    --wrap-narrow: 820px;
    --wrap-wide:  1440px;
    --gutter:     24px;
    --nav-h:      72px;

    /* ---- Compatibilidad con el CSS antiguo ----
       Las plantillas siguen usando estos nombres en estilos en línea
       (style="color:var(--accent)"), así que se mantienen apuntando
       a los tokens nuevos en lugar de duplicar valores. */
    --primary:        var(--navy-800);
    --primary-light:  var(--navy-700);
    --accent-soft:    var(--accent-wash);
    --gold:           var(--gold-500);
    --gold-hover:     var(--gold-600);
    --blue:           var(--info-500);
    --blue-hover:     var(--info-600);
    --success:        var(--ok-600);
    --success-soft:   var(--ok-wash);
    --danger:         var(--bad-600);
    --danger-soft:    var(--bad-wash);
    --warning:        var(--warn-600);
    --warning-soft:   var(--warn-wash);
    --text:           var(--ink);
    --text-secondary: var(--ink-body);
    --text-muted:     var(--ink-muted);
    --border:         var(--line);
    --bg:             var(--surface-page);
    --bg-alt:         var(--surface-subtle);
    --white:          var(--surface-card);
    --radius:         var(--r-md);
    --radius-lg:      var(--r-lg);
    --shadow-sm:      var(--sh-sm);
    --shadow:         var(--sh-md);
    --shadow-lg:      var(--sh-lg);
    --shadow-xl:      var(--sh-xl);
    --transition:     all var(--dur-fast) var(--ease);
    --font:           var(--font-sans);
}

/* ============================================================
   MODO OSCURO
   Se invierte el papel de las superficies manteniendo el navy
   como familia, para que siga oliendo a la misma marca.
   ============================================================ */
:root[data-theme="dark"] {
    --surface-page:    #0A0F18;
    --surface-card:    #111A28;
    --surface-subtle:  #16202F;
    --surface-sunken:  #0D1421;
    --surface-inverse: #060A11;

    --ink:        #EEF2F7;
    --ink-body:   #B9C3D1;
    --ink-muted:  #7E8B9E;
    --ink-faint:  #5C6879;

    --line:        #22304A;
    --line-strong: #2E3E5C;

    --accent:        var(--gold-400);
    --accent-strong: var(--gold-400);
    --accent-hover:  var(--gold-500);
    --accent-wash:   rgba(240,180,0,.13);

    --ok-wash:   rgba(22,163,74,.15);
    --warn-wash: rgba(217,119,6,.15);
    --bad-wash:  rgba(220,38,38,.15);
    --info-wash: rgba(37,99,235,.15);

    --ok-600:   #4ADE80;
    --warn-600: #FBBF24;
    --bad-600:  #F87171;
    --info-600: #93B4FD;

    --sh-xs: 0 1px 2px rgba(0,0,0,.4);
    --sh-sm: 0 1px 3px rgba(0,0,0,.45);
    --sh-md: 0 8px 24px rgba(0,0,0,.45);
    --sh-lg: 0 24px 60px rgba(0,0,0,.5);
    --sh-xl: 0 32px 80px rgba(0,0,0,.6);
}

/* Los grises neutros también se voltean para que las utilidades
   que los usan directamente no queden ilegibles en oscuro. */
:root[data-theme="dark"] {
    --n-50:  #16202F;
    --n-100: #1A2536;
    --n-200: #22304A;
    --n-300: #2E3E5C;
    --n-400: #5C6879;
    --n-500: #7E8B9E;
    --n-600: #9AA6B6;
    --n-700: #B9C3D1;
    --n-800: #D6DEE8;
    --n-900: #EEF2F7;
}