/* Distribuidora Khan — Design tokens. Fuente unica de verdad de valores.
   Ningun otro CSS de este proyecto escribe un hex, un px o un rem literal. */

:root {
  /* Colors */
  --color-navy: #1F3A5F;
  --color-navy-dark: #16283F;
  --color-gold: #C9A227;
  --color-gold-dark: #A98419;
  --color-white: #FFFFFF;
  --color-bg: #F7F8FA;
  --color-text: #1B1F27;
  --color-text-muted: #5B6472;
  --color-border: #E2E5EA;
  --color-success: #1E7A34;
  --color-error: #B3261E;

  /* Typography */
  --font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-size-display: 2.75rem;
  --font-size-display-desktop: 4.5rem;
  --line-height-display: 1.2;

  --font-size-h1: 2.5rem;
  --font-size-h1-desktop: 3.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --line-height-heading: 1.25;

  --font-size-body: 1rem;
  --line-height-body: 1.6;
  --font-size-small: 0.875rem;

  --font-weight-heading: 700;
  --font-weight-body: 400;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius */
  --radius-card: 8px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --shadow-card-hover: 0 2px 4px rgba(16, 24, 40, .08), 0 4px 8px rgba(16, 24, 40, .12);
  --shadow-card-lift: 0 16px 28px rgba(31, 58, 95, .22);

  /* Layout */
  --content-max-width: 1200px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;

  /* Motion */
  --motion-duration: 180ms;
  --motion-easing: ease;
}