/* Design tokens for the LosUsados redesign.
   Brand colors follow the Gran Titán manual (8 Oct 2026): #0463A9 and #4D4D4D, never altered.
   Tints are the official blue mixed with white; hover states darken with an overlay, not a new hue.
   Breakpoints (media queries cannot read custom properties): 480, 768, 1024, 1280, 1536 px. */

@font-face {
  font-family: Inter;
  src: url("assets/fonts/inter.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url("assets/fonts/poppins.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand */
  --brand-blue: #0463A9;
  --brand-gray: #4D4D4D;
  --blue-50: color-mix(in srgb, var(--brand-blue) 6%, #fff);
  --blue-100: color-mix(in srgb, var(--brand-blue) 12%, #fff);
  --blue-200: color-mix(in srgb, var(--brand-blue) 24%, #fff);
  --blue-ring: color-mix(in srgb, var(--brand-blue) 40%, #fff);
  --press-overlay: inset 0 0 0 100vmax rgb(0 0 0 / .12);
  --hover-overlay: inset 0 0 0 100vmax rgb(0 0 0 / .08);

  /* Neutrals */
  --ink-900: #1d2228;
  --ink-700: var(--brand-gray);
  --ink-500: #6b7280;
  --ink-300: #c9ced6;
  --ink-200: #e3e7ed;
  --ink-100: #eef1f5;
  --ink-50: #f6f8fa;
  --white: #fff;

  /* Functional (states only, never brand) */
  --success: #157f3c;
  --success-bg: #e8f5ec;
  --warning: #a35200;
  --warning-bg: #fff4e5;
  --danger: #c0262d;
  --danger-bg: #fdecec;
  --whatsapp: #0e7a40;

  /* Semantic */
  --bg: var(--ink-50);
  --surface: var(--white);
  --surface-muted: var(--ink-100);
  --text: var(--brand-gray);
  --text-strong: var(--ink-900);
  --text-muted: var(--ink-500);
  --border: var(--ink-200);
  --border-strong: var(--ink-300);
  --accent: var(--brand-blue);
  --accent-soft: var(--blue-50);
  --focus: 0 0 0 3px var(--blue-ring);

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: Poppins, var(--font-sans);
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  --leading-tight: 1.2;
  --leading-normal: 1.55;

  /* Spacing (4 px base) */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --gutter: clamp(1rem, .6rem + 2vw, 2rem);

  /* Shape and depth */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / .06);
  --shadow: 0 2px 8px rgb(16 24 40 / .08), 0 1px 2px rgb(16 24 40 / .04);
  --shadow-lg: 0 16px 40px rgb(16 24 40 / .16);

  /* Layout */
  --container: 1440px;
  --container-narrow: 960px;
  --header-height: 68px;
  --bottom-nav-height: 64px;
  --tap: 44px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --duration: .18s;

  /* Layers */
  --z-sticky: 20;
  --z-header: 30;
  --z-overlay: 50;
  --z-toast: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0s; }
}