/* TechPartners LATAM — Tech premium 2026 refined · cold tech
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * Genre: tech premium · Macrostructure: Asymmetric Editorial + Bento + Metric Bar
 * Nav: N1b canonical · Footer: Ft5 Statement
 *
 * PALETA — tech frío neutro refinado corporativo premium (no plantilla IA)
 * paper oklch(97% 0.005 240) frío neutro · ink oklch(16% 0.02 240) · accent azul-violeta oklch(52% 0.14 265) distintivo + amber oklch(68% 0.12 45) solo PRO
 * No cyan genérico, no warm stone, no crema. Identidad propia TechPartners — azul-violeta profundo tech fría + amber cálido puntual PRO.
 * Paper band: light (>85%) · Display: Space Grotesk + Instrument Sans 600 h1 · Accent hue: 265° violeta-tech (no cyan 230)
 *
 * TIPOGRAFÍA — pairing distintivo no default IA (typography-expert §0/§1/§2)
 * Evitadas: Inter, Roboto, Poppins, Montserrat, Fraunces, Geist, Söhne, Space Grotesk sola sin variación.
 * Display: Space Grotesk (Florian Karsten) tech — voz display; H1 en Instrument Sans 600 tracking -0.02 (variación corporativa premium, no todo Space Grotesk).
 * Body/UI: Instrument Sans 400-700 — workhorse frío 14-17px.
 * Kickers/Mono: IBM Plex Mono / Fragment Mono (0.08em letter-spacing, uppercase) + JetBrains tabular-nums para precios — identidad técnica sin ser genérica.
 * Pairing: Instrument Sans (h1 voz) + Space Grotesk (títulos) + IBM Plex Mono (kickers/data) — límite 2 familias + mono ok §2.1.
 * Scale: Major Third 1.25, clamp() fluido 320→1240, font-optical-sizing:auto, size-adjust fallback anti-CLS.
 *
 * GLOBO — isotipo LATAM sutil: red nodos + 2 elipses lat/long punteadas (globo), arco negativo sugiere cono sur sin mapa literal. Ver site/assets/brand-moodboard.md §4 y site/assets/icons/logo.svg (accent tech #00D9FF / #2547D1)
 *
 * Skills aplicadas: hallmark (macrostructure/theme/diversification), design-taste-frontend (DIALS 6/4/3, anti-default), impeccable (Persuade), frontend-design (spatial asymmetry), typography-expert (register→font), web-design-guidelines, web-motion-design (transform/opacity only), accessible-motion (prefers-reduced-motion), mobile-responsiveness (320/375/414/768), semantic-html (landmarks/headings)
 */

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

  /* — Base — frío neutro tech (hue 240), no warm stone 75 */
  --color-paper:          oklch(97% 0.005 240);
  --color-paper-2:        oklch(96% 0.007 240);
  --color-paper-3:        oklch(93.5% 0.01 240);
  --color-paper-elevated: oklch(99% 0.003 240);
  --color-ink:            oklch(16% 0.02 240);
  --color-ink-2:          oklch(28% 0.015 240);
  --color-muted:          oklch(48% 0.015 240);
  --color-muted-2:        oklch(56% 0.012 240);
  --color-rule:           oklch(88% 0.01 240);
  --color-rule-strong:    oklch(82% 0.012 240);

   /* — Brand — azul-violeta tech distintivo oklch(52% 0.14 265) + amber 45° solo badge PRO */
  --color-accent:         oklch(52% 0.14 265);
  --color-accent-ink:     oklch(98% 0.005 240);
  --color-accent-hover:   oklch(47% 0.15 265);
  --color-accent-soft:    oklch(94% 0.03 265);
  --color-accent-ring:    oklch(52% 0.14 265 / 0.14);

  --color-amber:          oklch(68% 0.12 45);
  --color-amber-ink:      oklch(16% 0.02 240);
  --color-amber-soft:     oklch(96% 0.02 45);
  --color-amber-border:   oklch(86% 0.03 45);

  --color-success:        oklch(52% 0.11 145);
  --color-danger:         oklch(56% 0.16 28);
  --color-focus:          oklch(58% 0.14 230);

  --color-navy:           oklch(16% 0.02 240);
  --color-navy-soft:      oklch(94% 0.01 240);

   /* — Shadows — corporativo premium sutil (Linear/Stripe), no agresiva */
  --shadow-hero: 0 8px 24px -12px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-sm: var(--shadow-card);
  --shadow-md: 0 4px 16px -8px rgba(0, 0, 0, 0.10);
  --shadow-lg: var(--shadow-hero);
  --shadow-nav: 0 1px 0 rgba(15, 27, 46, 0.06);

   /* — Tipografía — h1 Instrument Sans 600 tracking -0.02, kickers IBM Plex Mono 0.08em (no default IA) */
  --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-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-kicker:  "IBM Plex Mono", "Fragment Mono", 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.4rem, 5vw + 0.6rem, 4.15rem);
  --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 — 4pt · ritmo vertical descomprimido (hallmark H.E · Linear 96px / Stripe 80px ref)
    * 3xl 4→5rem · 4xl 6→7rem · 5xl 8→9rem — secciones a 5–5.5rem desktop (antes 3–3.8rem) */
   --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: 5rem;
   --space-4xl: 7rem;
   --space-5xl: 9rem;

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

  /* — Motion — sobrio, 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-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 — corporativo premium mezcla intencional (no cuadrado brutalista 4px) */
  /* hero + cards principales 16-20px, pricing 20px, nav 12px, CTA primario pill 999px / secundario 12px */
  --radius-xs: 12px;   /* nav, botón secundario */
  --radius-sm: 12px;   /* nav, secundario */
  --radius-md: 16px;   /* cards principales, bento, búsqueda */
  --radius-lg: 18px;   /* hero (16-20 rango) */
  --radius-xl: 20px;   /* pricing cards */
  --radius-pill: 999px; /* CTA primario pro */
  --radius-nav: 12px;
  --radius-card: 16px;
  --radius-card-lg: 20px;
  --radius-hero: 18px;
  --radius-btn-primary: 999px;
  --radius-btn-secondary: 12px;

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

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

  --color-paper:          oklch(16% 0.02 240);
  --color-paper-2:        oklch(19% 0.02 240);
  --color-paper-3:        oklch(22% 0.02 240);
  --color-paper-elevated: oklch(20% 0.02 240);
  --color-ink:            oklch(97% 0.005 240);
  --color-ink-2:          oklch(78% 0.01 240);
  --color-muted:          oklch(69% 0.015 240);
  --color-muted-2:        oklch(62% 0.012 240);
  --color-rule:           oklch(28% 0.02 240);
  --color-rule-strong:    oklch(34% 0.022 240);

  --color-accent:         oklch(60% 0.15 265);
  --color-accent-ink:     oklch(16% 0.02 240);
  --color-accent-hover:   oklch(66% 0.14 265);
  --color-accent-soft:    oklch(24% 0.05 265);
  --color-accent-ring:    oklch(60% 0.15 265 / 0.20);

  --color-amber:          oklch(70% 0.12 45);
  --color-amber-ink:      oklch(16% 0.02 240);
  --color-amber-soft:     oklch(24% 0.03 240);
  --color-amber-border:   oklch(40% 0.05 240);

  --color-navy:           oklch(97% 0.005 240);
  --color-navy-soft:      oklch(21% 0.02 240);

  --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 — cold tech */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-paper:          oklch(16% 0.02 240);
    --color-paper-2:        oklch(19% 0.02 240);
    --color-paper-3:        oklch(22% 0.02 240);
    --color-paper-elevated: oklch(20% 0.02 240);
    --color-ink:            oklch(97% 0.005 240);
    --color-ink-2:          oklch(78% 0.01 240);
    --color-muted:          oklch(69% 0.015 240);
    --color-muted-2:        oklch(62% 0.012 240);
    --color-rule:           oklch(28% 0.02 240);
    --color-rule-strong:    oklch(34% 0.022 240);
    --color-accent:         oklch(62% 0.14 230);
    --color-accent-ink:     oklch(16% 0.02 240);
    --color-accent-soft:    oklch(24% 0.04 230);
  }
}