/* TechPartners LATAM — Retro-Elegante 2026 · Pixel 2D × Premium Editorial
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * Genre: retro-elegant (editorial frame + 8-bit accents) · Macrostructure: Hero Orbit + Proveedores Pixel Wall + Bento Pixel + Pricing Pros
 * Nav: N1b canonical (pixel-aware) · Footer: Ft5 Statement
 *
 * PALETA — retro-elegante contenida (no neón total, solo acentos)
 * Base: Dark Navy #0F1B2E oklch(18% 0.02 250) + Off-White #F8F9FC oklch(98.2% 0.004 260)
 * Accents: Pixel Gold #FFC857 oklch(84% 0.14 75) + Mint #00D9A5 oklch(74% 0.155 175) + Pixel Pink #FF6B9D oklch(66% 0.19 355) detalles
 * Uso: gold = CTA primario + badges pixel + hover border; mint = success + validación; pink = dot detalle + glitch hover (sutil)
 * Paper band: light (>85%) · Display: Space Grotesk + Instrument Sans body + Silkscreen SOLO para labels pixel 8-10px
 *
 * TIPOGRAFÍA — pairing retro-elegante (typography-expert §1/§2 + §0)
 * Retiradas: Inter, Roboto, Poppins, Montserrat, Fraunces, Geist, Söhne, Space Grotesk sola sin variación (ahora acompañada)
 * Display: Space Grotesk (Florian Karsten) — voz elegante, títulos 28-52px, tracking -0.02, roman (no italic headers)
 * Body/UI: Instrument Sans 400-700 — workhorse elegante 14-17px, measure 65ch
 * Pixel labels: Silkscreen 400/700 + Press Start 2P fallback — SOLO kickers, badges, LEVEL tags, 8-10px, uppercase 0.12em
 * Mono/Data: JetBrains Mono 400-700 tabular-nums — precios, contadores
 * Scale: Major Third 1.25 fluid clamp 320→1240, font-optical-sizing:auto, size-adjust anti-CLS.
 *
 * RETRO — bordes pixelados 2px solid ink + box-shadow 4px 4px 0 ink (steps(4)), padding generoso 24-32px,
 *         pixel grid overlay 2px dots oklch(18% / 0.06), image-rendering:pixelated en iconos pixel
 *         sin infantilizmo: whitespace 88-112px, animación stagger 100ms steps(4), un solo glitch hover hero
 *
 * Skills: hallmark, design-taste-frontend (DIALS 7/5/4), impeccable (Persuade), frontend-design,
 *         typography-expert, web-motion-design, accessible-motion, mobile 320/375/414/768, semantic-html
 */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* — Base — off-white frío elegante (260) + navy tinta */
  --color-paper:          oklch(98.2% 0.004 260);
  --color-paper-2:        oklch(96.2% 0.007 260);
  --color-paper-3:        oklch(93.5% 0.009 260);
  --color-paper-elevated: oklch(99% 0.002 260);
  --color-ink:            oklch(18% 0.022 250);
  --color-ink-2:          oklch(28% 0.015 250);
  --color-muted:          oklch(48% 0.015 250);
  --color-muted-2:        oklch(58% 0.011 250);
  --color-rule:           oklch(88% 0.01 260);
  --color-rule-strong:    oklch(82% 0.012 260);

  /* — Brand — pixel gold + mint + pink (solo acentos, no neón total) */
  --color-accent:         oklch(84% 0.14 75);
  --color-accent-hover:   oklch(80% 0.13 75);
  --color-accent-ink:     oklch(18% 0.022 250);
  --color-accent-soft:    oklch(96% 0.035 75);
  --color-accent-ring:    oklch(84% 0.14 75 / 0.16);
  --color-accent-grad:    linear-gradient(135deg, oklch(84% 0.14 75), oklch(78% 0.12 68));

  --color-mint:           oklch(74% 0.155 175);
  --color-mint-hover:     oklch(68% 0.14 175);
  --color-mint-ink:       oklch(18% 0.022 250);
  --color-mint-soft:      oklch(95% 0.03 175);
  --color-mint-border:    oklch(85% 0.045 175);

  --color-pink:           oklch(66% 0.19 355);
  --color-pink-soft:      oklch(95% 0.025 355);
  --color-pink-border:    oklch(85% 0.045 355);

  /* alias para compat con componentes existentes: amber → gold */
  --color-amber:          oklch(84% 0.14 75);
  --color-amber-ink:      oklch(18% 0.022 250);
  --color-amber-soft:     oklch(96% 0.035 75);
  --color-amber-border:   oklch(86% 0.04 75);

  --color-success:        oklch(74% 0.155 175);
  --color-danger:         oklch(58% 0.16 28);
  --color-focus:          oklch(84% 0.14 75);
  --color-navy:           oklch(18% 0.022 250);
  --color-navy-soft:      oklch(94% 0.012 260);

  /* — Shadows — pixel 4×4 + sutil premium */
  --shadow-pixel:         4px 4px 0 var(--color-ink);
  --shadow-pixel-hover:   6px 6px 0 var(--color-ink);
  --shadow-pixel-sm:      3px 3px 0 var(--color-ink);
  --shadow-card:          0 2px 10px rgba(15, 27, 46, 0.06);
  --shadow-sm:            0 1px 4px rgba(15,27,46,0.06);
  --shadow-md:            0 4px 16px -8px rgba(15,27,46,0.10);
  --shadow-lg:            0 8px 24px -12px rgba(15,27,46,0.12);
  --shadow-nav:           0 1px 0 rgba(15, 27, 46, 0.06);
  --shadow-hero:          var(--shadow-lg);

  /* — Tipografía — Silkscreen pixel solo kickers, Space Grotesk display, Instrument body */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-label:   "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-pixel:   "Silkscreen", "Press Start 2P", ui-monospace, monospace;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-kicker:  "Silkscreen", "Press Start 2P", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-display: clamp(2.6rem, 5.4vw + 0.7rem, 4.5rem);
  --text-hero: clamp(2.45rem, 5.2vw + 0.6rem, 4.3rem);
  --text-price: clamp(1.05rem, 1.2vw + 0.9rem, 1.35rem);
  --text-price-lg: clamp(2.4rem, 3.5vw, 3.1rem);

  --leading-tight: 1.05;
  --leading-snug: 1.15;
  --leading-normal: 1.62;
  --leading-relaxed: 1.72;

  --tracking-tight: -0.015em;
  --tracking-tighter: -0.025em;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.10em;

  /* — Spacing — ritmo 88-112px (5.5rem-7rem), generous */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 5.5rem;
  --space-4xl: 7rem;
  --space-5xl: 9rem;

  --page-gutter: clamp(1rem, 3.5vw, 2rem);
  --content-max: 78rem;
  --content-narrow: 46rem;

  /* — Motion — stagger 100ms steps(4) pixel, transform+opacity only */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pixel: steps(4, end);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 80ms;
  --dur-micro: 140ms;
  --dur-short: 200ms;
  --dur-medium: 320ms;
  --dur-long: 480ms;

  /* — Radii — pixel elegancy: 0 para cajas pixel, pero diálogo conserva 12px suave */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 12px;
  --radius-pill: 0px;
  --radius-nav: 0px;
  --radius-card: 0px;
  --radius-card-lg: 0px;
  --radius-hero: 0px;
  --radius-btn-primary: 0px;
  --radius-btn-secondary: 0px;
  --radius-dialog: 12px;

  /* — Borders — pixel 2px */
  --rule-hair: 1px;
  --rule-pixel: 2px;
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-paper:          oklch(18% 0.022 250);
  --color-paper-2:        oklch(21% 0.022 250);
  --color-paper-3:        oklch(24% 0.022 250);
  --color-paper-elevated: oklch(22% 0.022 250);
  --color-ink:            oklch(98.2% 0.004 260);
  --color-ink-2:          oklch(78% 0.01 260);
  --color-muted:          oklch(69% 0.015 260);
  --color-muted-2:        oklch(62% 0.011 260);
  --color-rule:           oklch(27% 0.02 250);
  --color-rule-strong:    oklch(32% 0.022 250);

  --color-accent:         oklch(84% 0.14 75);
  --color-accent-hover:   oklch(80% 0.13 75);
  --color-accent-ink:     oklch(18% 0.022 250);
  --color-accent-soft:    oklch(26% 0.05 75);
  --color-accent-ring:    oklch(84% 0.14 75 / 0.22);
  --color-accent-grad:    linear-gradient(135deg, oklch(84% 0.14 75), oklch(78% 0.12 68));

  --color-mint:           oklch(74% 0.155 175);
  --color-mint-soft:      oklch(26% 0.04 175);
  --color-mint-border:    oklch(34% 0.05 175);

  --color-pink:           oklch(68% 0.19 355);
  --color-pink-soft:      oklch(26% 0.03 355);

  --color-amber:          oklch(84% 0.14 75);
  --color-amber-ink:      oklch(18% 0.022 250);
  --color-amber-soft:     oklch(26% 0.05 75);
  --color-amber-border:   oklch(32% 0.05 75);

  --color-navy:           oklch(98% 0.004 260);
  --color-navy-soft:      oklch(21% 0.022 250);

  --shadow-pixel:         4px 4px 0 oklch(8% 0.015 250);
  --shadow-pixel-hover:   6px 6px 0 oklch(8% 0.015 250);
  --shadow-pixel-sm:      3px 3px 0 oklch(8% 0.015 250);
  --shadow-card:          0 1px 2px rgba(0,0,0,0.32), 0 8px 24px rgba(0,0,0,0.30);
  --shadow-nav:           0 1px 0 rgba(255,255,255,0.06);
}

/* prefers-color-scheme fallback before JS — retro dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-paper:          oklch(18% 0.022 250);
    --color-paper-2:        oklch(21% 0.022 250);
    --color-paper-3:        oklch(24% 0.022 250);
    --color-paper-elevated: oklch(22% 0.022 250);
    --color-ink:            oklch(98.2% 0.004 260);
    --color-ink-2:          oklch(78% 0.01 260);
    --color-muted:          oklch(69% 0.015 260);
    --color-muted-2:        oklch(62% 0.011 260);
    --color-rule:           oklch(27% 0.02 250);
    --color-rule-strong:    oklch(32% 0.022 250);
    --color-accent:         oklch(84% 0.14 75);
    --color-accent-soft:    oklch(26% 0.05 75);
  }
}