/* DISTRIFARMA — Tokens del design system (generado, no editar a mano).
   Fuente: design system DISTRIFARMA. */


/* ===== tokens/fonts.css ===== */
/* ============================================================
   Distriaguirre — Webfonts
   Display:  Archivo         confident, industrial-institutional headlines
   Body/UI:  Hanken Grotesk  humanist, legible, warm
   Mono:     IBM Plex Mono   coverage tables, NIT, specs, numeric data

   Loaded from the Google Fonts CDN for reliability. If you need
   fully offline binaries, download the .woff2 files into this
   folder and replace the @import below with local @font-face rules.
   ============================================================ */



/* ===== tokens/colors.css ===== */
/* ============================================================
   Distriaguirre — Color tokens
   B2B pharmaceutical premium. Clean white canvas, with structural
   blocks in deep blue + petroleum blue, an institutional green for
   trust/coverage, and warm orange/amber reserved STRICTLY for CTAs
   and key metrics. Color is structural, never decorative.
   ============================================================ */

:root {
  /* ---- Deep blue (azul profundo) — primary brand spine ---- */
  --blue-950: #061626;
  --blue-900: #0A2540;
  --blue-800: #0E3457;
  --blue-700: #134570;
  --blue-600: #1C5C92;
  --blue-500: #2A75B3;
  --blue-200: #BBD3E8;
  --blue-100: #DCE9F4;
  --blue-50:  #EFF5FB;

  /* ---- Petroleum blue (azul petróleo) — secondary structure ---- */
  --petrol-900: #06343B;
  --petrol-700: #0C5460;
  --petrol-600: #0F6675;
  --petrol-500: #137E8F;
  --petrol-100: #D4EAEE;
  --petrol-50:  #ECF6F8;

  /* ---- Institutional green (verde institucional) — trust / coverage ---- */
  --green-900: #0E4530;
  --green-700: #16654A;
  --green-600: #1C8159;
  --green-500: #239A6A;
  --green-100: #D5EDE1;
  --green-50:  #ECF6F1;

  /* ---- Accent: warm CTA orange — reserved for primary actions ---- */
  --orange-600: #D9551A;
  --orange-500: #EF6A21;
  --orange-400: #F5853F;
  --orange-100: #FCE3D4;
  --orange-50:  #FDF1E8;

  /* ---- Accent: amber — reserved for highlighted metrics / numbers ---- */
  --amber-500: #F4A724;
  --amber-100: #FBEBC9;

  /* ---- Neutrals — cool slate, clean & clinical ---- */
  --white:     #FFFFFF;
  --paper:     #F6F8FB;
  --mist:      #EEF2F7;
  --line:      #E1E8F0;
  --line-strong: #CBD6E2;
  --slate-400: #93A4B6;
  --slate-500: #6B7E92;
  --slate-600: #4F6273;
  --slate-700: #364859;
  --slate-800: #21303F;
  --ink:       #0B1A2B;

  /* ---- Semantic status ---- */
  --ok:    var(--green-600);
  --info:  var(--blue-600);
  --warn:  var(--amber-500);
  --danger:#C5403A;

  /* ============================================================
     Semantic aliases — reference THESE in components & screens
     ============================================================ */

  /* Brand roles */
  --brand-primary:   var(--blue-900);
  --brand-primary-2: var(--blue-700);
  --brand-secondary: var(--petrol-700);
  --brand-trust:     var(--green-600);
  --brand-cta:       var(--orange-500);
  --brand-cta-hover: var(--orange-600);
  --brand-metric:    var(--amber-500);

  /* Surfaces */
  --surface-page:    var(--white);
  --surface-subtle:  var(--paper);
  --surface-muted:   var(--mist);
  --surface-card:    var(--white);
  --surface-deep:    var(--blue-900);   /* dark feature blocks */
  --surface-deepest: var(--blue-950);
  --surface-petrol:  var(--petrol-700); /* alternate dark block */
  --surface-trust:   var(--green-50);   /* tinted trust band */
  --surface-accent:  var(--orange-50);

  /* Text */
  --text-strong:  var(--ink);
  --text-body:    var(--slate-700);
  --text-muted:   var(--slate-500);
  --text-faint:   var(--slate-400);
  --text-on-dark: #EAF1F8;
  --text-on-dark-muted: #9FB6CC;
  --text-link:    var(--blue-600);

  /* Borders & dividers */
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --border-on-dark: rgba(255, 255, 255, 0.14);
  --focus-ring:    var(--blue-500);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   Distriaguirre — Typography tokens
   Archivo for display/headings, Hanken Grotesk for body/UI,
   IBM Plex Mono for data (coverage, NIT, specs, eyebrows).
   ============================================================ */

:root {
  /* Families */
  --font-display: "Archivo", "Hanken Grotesk", system-ui, sans-serif; /* @kind font */
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* @kind font */
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* @kind font */

  /* Weights */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-black:    800; /* @kind other */

  /* Type scale — fluid where it matters (display) */
  --fs-display-xl: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem); /* @kind other */
  --fs-display-lg: clamp(2.25rem, 1.5rem + 3vw, 3.25rem); /* @kind other */
  --fs-display-md: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); /* @kind other */
  --fs-h3:   1.5rem; /* @kind other */
  --fs-h4:   1.25rem; /* @kind other */
  --fs-h5:   1.0625rem; /* @kind other */
  --fs-lead: 1.25rem; /* @kind other */
  --fs-body: 1.0625rem; /* @kind other */
  --fs-sm:   0.9375rem; /* @kind other */
  --fs-xs:   0.8125rem; /* @kind other */
  --fs-eyebrow: 0.78125rem; /* @kind other */

  /* Line heights */
  --lh-tight:   1.04; /* @kind other */
  --lh-snug:    1.18; /* @kind other */
  --lh-heading: 1.22; /* @kind other */
  --lh-body:    1.62; /* @kind other */
  --lh-relaxed: 1.7; /* @kind other */

  /* Letter spacing */
  --ls-tight:   -0.022em; /* @kind other */
  --ls-snug:    -0.012em; /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-eyebrow:  0.14em; /* @kind other */
  --ls-label:    0.04em; /* @kind other */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   Distriaguirre — Spacing, sizing & layout tokens
   8px base grid. Generous, calm spacing — premium B2B breathing room.
   ============================================================ */

:root {
  /* Spacing scale (8px base) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6.5rem;   /* 104 */
  --space-12: 8rem;     /* 128 */

  /* Section rhythm */
  --section-y:   clamp(3.5rem, 2rem + 6vw, 7rem); /* @kind spacing */
  --container:   1200px; /* @kind spacing */
  --container-narrow: 760px; /* @kind spacing */
  --gutter:      clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* @kind spacing */

  /* Radii — confident, restrained. Not bubbly. */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* Control sizing */
  --control-h:    48px;   /* @kind spacing */
  --control-h-sm: 38px;   /* @kind spacing */
  --control-h-lg: 56px;   /* @kind spacing */
  --tap-min:      44px;   /* @kind spacing */
}


/* ===== tokens/effects.css ===== */
/* ============================================================
   Distriaguirre — Effects: shadows, borders, transitions, gradients
   Soft, cool-tinted shadows (blue-grey, never pure black). Calm motion.
   ============================================================ */

:root {
  /* Elevation — cool blue-grey tint, low spread, soft */
  --shadow-xs: 0 1px 2px rgba(11, 26, 43, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 26, 43, 0.08), 0 1px 2px rgba(11, 26, 43, 0.04);
  --shadow-md: 0 6px 18px -6px rgba(11, 26, 43, 0.14), 0 2px 6px rgba(11, 26, 43, 0.06);
  --shadow-lg: 0 18px 40px -12px rgba(11, 26, 43, 0.20), 0 4px 12px rgba(11, 26, 43, 0.07);
  --shadow-cta: 0 8px 20px -6px rgba(217, 85, 26, 0.42);

  /* Borders */
  --border-width: 1px; /* @kind spacing */
  --border-card:  1px solid var(--border); /* @kind other */

  /* Focus */
  --focus-shadow: 0 0 0 3px rgba(42, 117, 179, 0.35);

  /* Motion — discreet, professional. Ease-out, short. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur:      200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* Brand gradients — used sparingly on dark feature blocks only */
  --grad-deep:   linear-gradient(135deg, var(--blue-900) 0%, var(--blue-800) 55%, var(--petrol-700) 100%); /* @kind other */
  --grad-petrol: linear-gradient(140deg, var(--petrol-700) 0%, var(--blue-900) 100%); /* @kind other */
  --grad-trust:  linear-gradient(120deg, var(--green-700) 0%, var(--petrol-700) 100%); /* @kind other */
  /* subtle hairline overlay for dark blocks */
  --grid-on-dark: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   Distriaguirre — Base layer
   Minimal, opinionated element defaults built on the tokens.
   Consumers get sensible typography + box-sizing for free.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  font-weight: var(--fw-bold);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display-lg); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-display-md); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Mono eyebrow / kicker utility */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-secondary);
}

::selection { background: var(--blue-200); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ===== tokens/interactions.css ===== */
/* ============================================================
   Distriaguirre — Component interaction states
   Hover / focus / active for components that render inline styles.
   Keyed to the className hooks each component emits (dg-*).
   ============================================================ */

/* ---- Button ---- */
.dg-btn { -webkit-tap-highlight-color: transparent; }
.dg-btn:hover { transform: translateY(-1px); }
.dg-btn:active { transform: translateY(0) scale(0.985); }
.dg-btn--cta:hover { background: var(--brand-cta-hover); box-shadow: 0 10px 24px -6px rgba(217,85,26,0.5); }
.dg-btn--primary:hover { background: var(--blue-800); }
.dg-btn--secondary:hover { background: var(--petrol-600); }
.dg-btn--outline:hover { border-color: var(--brand-primary-2); background: var(--blue-50); }
.dg-btn--ghost:hover { background: var(--blue-50); }
.dg-btn--onDark:hover { background: rgba(255,255,255,0.18); }
.dg-btn:disabled, .dg-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- Card (interactive / link cards) ---- */
.dg-card--link { transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.dg-card--link:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }

/* ---- Category card ---- */
.dg-cat:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }
.dg-cat:hover .dg-cat__arrow { transform: translateX(3px); color: var(--brand-cta); }

/* ---- Input ---- */
.dg-input:focus { outline: none; border-color: var(--focus-ring); box-shadow: var(--focus-shadow); }
.dg-input::placeholder { color: var(--text-faint); }

/* ---- Breadcrumb links ---- */
.dg-crumb a:hover { color: var(--text-strong); text-decoration: none; }