/* ============================================================
   DomiRun — Tokens (colors + type)
   Manual de Identidad Visual Corporativa v1.1, Mayo 2026
   Strict bicolor palette: Rojo DomiRun + Blanco, with black for
   high-contrast inverse usage. 70% claro / 30% rojo.
   ============================================================ */

/* --- Webfont: Inter (official corporate face) --------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Brand Colors ---------- */
  --domi-red:        #B71634;   /* Rojo DomiRun — accent, CTA, alerts */
  --domi-red-dark:   #8E0F26;   /* press / hover-deepen */
  --domi-red-soft:   #E6536A;   /* hover-lighten */
  --domi-red-tint:   #FBE7EB;   /* tag bg, soft fills */
  --domi-white:      #FFFFFF;   /* lienzo de confianza */
  --domi-black:      #000000;   /* contraste inverso, type cap */

  /* ---------- Neutrals (warm-greys, lensed from white canvas) */
  --neutral-0:       #FFFFFF;
  --neutral-50:      #FAFAFA;
  --neutral-100:     #F4F4F5;
  --neutral-200:     #E5E5E7;
  --neutral-300:     #D1D1D6;
  --neutral-400:     #A1A1AA;
  --neutral-500:     #71717A;
  --neutral-600:     #52525B;
  --neutral-700:     #3F3F46;
  --neutral-800:     #27272A;
  --neutral-900:     #18181B;

  /* ---------- Semantic surfaces ---------- */
  --bg:              var(--neutral-0);
  --bg-subtle:       var(--neutral-50);
  --bg-muted:        var(--neutral-100);
  --bg-inverse:      var(--domi-black);
  --surface:         var(--neutral-0);
  --surface-raised:  var(--neutral-0);
  --border:          var(--neutral-200);
  --border-strong:   var(--neutral-300);
  --divider:         var(--neutral-100);

  /* ---------- Semantic foreground ---------- */
  --fg1:             var(--neutral-900);  /* headlines, body */
  --fg2:             var(--neutral-700);  /* secondary text */
  --fg3:             var(--neutral-500);  /* tertiary, captions */
  --fg-muted:        var(--neutral-400);  /* placeholders, disabled */
  --fg-inverse:      var(--domi-white);
  --fg-accent:       var(--domi-red);

  /* ---------- Cold-chain modality tokens ----------
     Brand mandates monochrome icons for service tiers; these
     ultra-subtle tints are ONLY for chip backgrounds, never
     for body color. Icons + text stay Rojo DomiRun. */
  --modality-dry:        #FBE7EB; /* same as red-tint */
  --modality-refrig:     #EAF1FA; /* faint cool wash */
  --modality-frozen:     #E8F4F7; /* faint frost wash */

  /* ---------- Status colors (utility only) ----------
     Used sparingly in operational dashboards. Keep red reserved
     for brand accent + critical action. */
  --status-success:  #1F8A4C;
  --status-warning:  #C77700;
  --status-danger:   var(--domi-red);
  --status-info:     #1F5BA8;
  --status-success-bg: #E6F4EC;
  --status-warning-bg: #FBEFD8;
  --status-info-bg:    #E5EEFA;

  /* ---------- Typography family ---------- */
  --font-sans:       'Inter', 'Arial', 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display:    'Inter', 'Arial', 'Poppins', sans-serif;
  --font-mono:       'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* ---------- Type scale (px, modular ~1.2-1.25) ---------- */
  --fs-2xs:   11px;
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;
  --fs-6xl:   80px;

  /* ---------- Type weights ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ---------- Line-heights ---------- */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  /* ---------- Letter-spacing ---------- */
  --ls-tight:    -0.022em;
  --ls-display:  -0.018em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-eyebrow:  0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --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;

  /* ---------- Radii (sharp + functional, not cute) ---------- */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-pill:  999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:  0 1px 1px rgba(15, 15, 20, 0.04);
  --shadow-sm:  0 1px 2px rgba(15, 15, 20, 0.06), 0 1px 1px rgba(15, 15, 20, 0.04);
  --shadow-md:  0 4px 10px rgba(15, 15, 20, 0.06), 0 2px 4px rgba(15, 15, 20, 0.04);
  --shadow-lg:  0 12px 24px rgba(15, 15, 20, 0.08), 0 4px 8px rgba(15, 15, 20, 0.04);
  --shadow-xl:  0 24px 48px rgba(15, 15, 20, 0.12), 0 8px 16px rgba(15, 15, 20, 0.06);
  --shadow-red: 0 4px 12px rgba(183, 22, 52, 0.24);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --header-h:      78px;
  --sidebar-w:     248px;
}

/* ============================================================
   Element-level defaults — direct mapping of brand voice
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display + headings (Inter Bold/ExtraBold, slightly tracked-in) */
.domi-display,
h1.domi {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg1);
}

h2, .h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg1);
}

h3, .h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg1);
}

h4, .h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

h5, .h5 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
}

/* ---- Eyebrow / overline ---- */
.domi-eyebrow {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--domi-red);
}

/* ---- Body ---- */
p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}

.body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

/* ---- Numeric / data (tabular figures for dashboards) ---- */
.domi-numeric {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- Inline code ---- */
code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--neutral-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--neutral-800);
}

/* ---- Anchors ---- */
a {
  color: var(--domi-red);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--domi-red-dark); text-decoration: underline; }

/* ---- Focus ring (accessibility) ---- */
:focus-visible {
  outline: 2px solid var(--domi-red);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}