/* ============================================================================
   TAXSIYA · Design Tokens (design system oficial) — fuente de verdad de marca.
   Fonts: Plus Jakarta Sans (display/titles), Inter (body/UI).
   ========================================================================== */
:root {
  /* ---- BRAND ---- */
  --brand-red:        #FD2624;
  --brand-red-hover:  #C01C1A;
  --brand-red-soft:   #FFE9E8;
  --brand-red-ring:   rgba(253, 38, 36, 0.32);

  /* ---- INK (navy family) ---- */
  --ink-900: #0B1325;
  --ink-800: #152039;
  --ink-700: #25304B;
  --ink-600: #3A4660;

  /* ---- NEUTRAL SCALE (cool, navy-tinted) ---- */
  --n-0: #FFFFFF; --n-25: #FBFCFD; --n-50: #F5F7FA; --n-100: #ECEFF4;
  --n-200: #DDE2EB; --n-300: #C5CCDA; --n-400: #97A1B5; --n-500: #6B7689;
  --n-600: #4E5870; --n-700: #343E54; --n-800: #1E2740; --n-900: #0B1325;

  /* ---- SEMANTIC ACCENTS ---- */
  --yellow: #F5C946; --yellow-soft: #FDF3D2;
  --green: #22C55E; --green-soft: #E4F8EC; --green-ink: #137A3E;
  --amber: #F59E0B; --info: #2563EB;

  /* ---- SEMANTIC SURFACES & TEXT (LIGHT = default) ---- */
  --bg: var(--n-25);
  --surface: #FFFFFF;
  --surface-2: var(--n-50);
  --surface-ink: var(--ink-800);
  --fg: var(--ink-800);
  --fg-2: #4A5468;
  --fg-3: #6B7689;
  --fg-on-dark: #FFFFFF;
  --fg-on-dark-2: #B7C0D4;
  --border: var(--n-200);
  --border-2: var(--n-300);
  --border-ink: rgba(255,255,255,0.12);
  --link: var(--brand-red);
  --link-hover: var(--brand-red-hover);
  --focus-ring: var(--brand-red-ring);

  /* ---- TYPE ---- */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.75rem, 1.6rem + 4.8vw, 4.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-lead: 1.25rem;
  --fs-body: 1.0625rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-eyebrow: 0.8125rem;
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-x: 800;
  --lh-tight: 1.04; --lh-snug: 1.18; --lh-base: 1.6;

  /* ---- SPACING / RADII ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- SHADOWS (soft, cool-tinted) ---- */
  --sh-xs: 0 1px 2px rgba(11,19,37,0.06);
  --sh-sm: 0 2px 6px rgba(11,19,37,0.07);
  --sh-md: 0 8px 24px rgba(11,19,37,0.09);
  --sh-lg: 0 18px 48px rgba(11,19,37,0.12);
  --sh-red: 0 10px 30px rgba(253,38,36,0.30);

  /* ---- LAYOUT / MOTION ---- */
  --container: 1200px; --nav-h: 72px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms; --dur: 220ms; --dur-slow: 480ms;
}

/* ---- DARK MODE (coherent, navy-based) ---- */
:root[data-theme="dark"] {
  --bg: var(--ink-900);
  --surface: #131C33;
  --surface-2: #0F1729;
  --fg: #F3F5FA;
  --fg-2: #B7C0D4;
  --fg-3: #8A95AD;
  --border: rgba(255,255,255,0.10);
  --border-2: rgba(255,255,255,0.16);
  --link: #FF6361;
  --link-hover: #FF8583;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }