/* Hallmark · macrostructure: Catalogue · H2 split-diptych knobs: ratio=7/5, right=interactive-product-photo, divider=negative-space
 * theme: custom · vibe: "precisión de laboratorio, color vivo, blanco técnico" · paper: oklch(99% 0.003 230) · accent: oklch(62% 0.14 230)
 * display: Space Grotesk · body: General Sans · mono: JetBrains Mono · axes: light / grotesk-sans / cool (cyan ~230°)
 * nav: N12 banner+retract · footer: Ft1 mast-headed · enrichment: real product photography (interactive showroom, no generated art)
 * genre: modern-minimal · studied: no · context: inferred-from-brief
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30) · mobile: pass (34, 50–57) — verificado en vivo a 320/375/414/768
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 */

:root {
  /* ---- Surfaces & ink ---- */
  --paper:    oklch(99% 0.003 230);
  --paper-2:  oklch(96.8% 0.005 230);
  --paper-3:  oklch(94.5% 0.007 230);
  --ink:      oklch(21% 0.012 240);
  --ink-hover:oklch(30% 0.02 240);
  --ink-2:    oklch(40% 0.015 240);
  --muted:    oklch(50% 0.014 240);
  --rule:     oklch(88% 0.006 240);
  --rule-2:   oklch(92.5% 0.005 240);
  --line-a:   oklch(30% 0.01 240 / 0.12);   /* borde alfa sobre swatches/fotos */
  --frost:    oklch(99% 0.003 230 / 0.86);  /* barra nav esmerilada y pastillas sobre imagen */
  --scrim:    oklch(15% 0.01 240 / 0.45);   /* fondo de overlays */

  /* ---- Brand ---- */
  --brand:      oklch(62% 0.14 230);   /* cían CoLiDo */
  --brand-ink:  oklch(46% 0.13 237);   /* cían legible sobre claro */
  --brand-soft: oklch(94% 0.025 230);  /* fondo de chip/badge */
  --kraft:      oklch(90% 0.035 85);   /* superficie kraft del empaque */
  --kraft-2:    oklch(85% 0.045 83);
  --kraft-deep: oklch(42% 0.075 70);   /* tinta sobre kraft (AA sobre --kraft) */
  --kraft-h:    oklch(33% 0.06 65);    /* titulares en banda kraft */
  --kraft-body: oklch(40% 0.06 70);    /* prosa en banda kraft */
  --kraft-chip: oklch(96% 0.02 85);    /* fondo de chip en banda kraft */
  --wa:         oklch(58% 0.155 150);  /* botón flotante WhatsApp */

  /* ---- Feedback ---- */
  --ok:       oklch(56% 0.14 155);
  --ok-ink:   oklch(38% 0.11 155);
  --ok-soft:  oklch(94% 0.045 155);
  --warn:     oklch(62% 0.13 75);
  --warn-ink: oklch(44% 0.11 75);
  --warn-soft:oklch(95% 0.05 85);
  --err:      oklch(54% 0.19 25);
  --err-soft: oklch(95% 0.03 25);
  --focus:    oklch(55% 0.19 237);

  /* ---- Type ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "General Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --text-xs:   0.75rem;    /* 12 — solo etiquetas mono */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.125rem;   /* 18 */
  --text-lg:   1.375rem;   /* 22 */
  --text-xl:   1.75rem;    /* 28 */
  --text-2xl:  2.1875rem;  /* 35 */
  --text-3xl:  2.75rem;    /* 44 */
  --text-display-s: clamp(1.9rem, 2.6vw + 1rem, 2.75rem);
  --text-display:   clamp(2.4rem, 3.6vw + 1rem, 4.35rem);

  /* ---- Space (4pt) ---- */
  --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:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ---- Radius ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  /* ---- Elevation (una sombra por elemento, máx.) ---- */
  --shadow-1: 0 1px 2px oklch(20% 0.01 240 / 0.05);
  --shadow-2: 0 10px 30px -12px oklch(20% 0.012 240 / 0.16), 0 1px 2px oklch(20% 0.01 240 / 0.05);
  --shadow-3: 0 24px 64px -20px oklch(20% 0.012 240 / 0.26);
  --hairline: 0 0 0 1px oklch(30% 0.01 240 / 0.06);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* ---- Z (escala nombrada) ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;

  /* ---- Layout ---- */
  --container: 78rem;      /* 1248px */
  --banner-h: 40px;
  --bar-h: 64px;

  /* ---- Marcas de pago (placeholder hasta tener SVG oficiales) ---- */
  --pay-wompi: #00825A;
  --pay-pse: #FFDD35;
  --pay-nequi: #DA0081;
  --pay-bancol: #FDDA24;
  --pay-mp: #00AEEF;
  --pay-visa: #1A1F71;
  --pay-mc: #EB001B;

  /* ---- Swatches de filamento (data tokens, extraídos de fotografía real) ---- */
  /* Catálogo de lanzamiento (MATERIAL DIGITAL · Excel referencias iniciales) */
  --c-pla-negro: #1B1C1F;
  --c-pla-blanco: #F4F4F1;
  --c-pla-gris: #9CA0A6;
  --c-pla-gris-oscuro: #4C5157;
  --c-pla-beige: #E2CFAF;
  --c-pla-piel: #F0C7A3;
  --c-pla-madera: #B98F62;
  --c-pla-marron: #5E4027;
  --c-pla-dorado: #D4A437;
  --c-pla-azul-cielo: #02C3EC;
  --c-pla-azul-claro: #3058BA;
  --c-pla-cian: #0CADE1;
  --c-pla-azul-agua-mate: #6B9ABC;
  --c-pla-verde-oscuro: #005E46;
  --c-pla-verde-claro: #97E25F;
  --c-pla-verde-menta: #7FCBD4;
  --c-pla-verde-menta-mate: #91BC99;
  --c-pla-verde-oliva-mate: #4D5134;
  --c-pla-rosa: #E77089;
  --c-pla-rosa-mate: #EE9EAB;
  --c-pla-rojo-mate: #D2121C;
  --c-pla-rojo-arcilla-mate: #8E392C;
  --c-pla-amarillo-transparente: #EFDC7E;
  --c-pla-verde-transparente: #9FD8AF;
  --c-pla-rojo-transparente: #E89A9A;
  --c-pla-azul-transparente: #8FC3E8;
  --c-pla-arcoiris-mate: linear-gradient(90deg,#D95A4E 0 25%,#E8B94A 25% 50%,#5FA85C 50% 75%,#4E7FD9 75%);
  --c-pla-multicolor-morado-dorado-negro: linear-gradient(90deg,#7444AC 0 33%,#D4A437 33% 66%,#1B1C1F 66%);
  --c-pla-multicolor-rojo-verde-amarillo: linear-gradient(90deg,#C93A34 0 33%,#3F9C4E 33% 66%,#E8C33C 66%);
  --c-pla-multicolor-negro-dorado-rojo: linear-gradient(90deg,#1B1C1F 0 33%,#D4A437 33% 66%,#C22B2F 66%);
  --c-pla-multicolor-rojo-amarillo-azul: linear-gradient(90deg,#C93A34 0 33%,#E8C33C 33% 66%,#2C6FD1 66%);
  --c-pla-multicolor-azul-cielo-rosa-verde-claro: linear-gradient(90deg,#6FC7EC 0 33%,#F2A9C4 33% 66%,#A5DC8A 66%);
  --c-pla-multicolor-naranja-azul-verde: linear-gradient(90deg,#E8752A 0 33%,#2C6FD1 33% 66%,#3F9C4E 66%);
  --c-tpu-blanco: #F2F2EE;
  --c-tpu-amarillo: #FAB510;
  --c-tpu-rojo: #DA2325;
  --c-tpu-morado: #824EA6;
  --c-tpu-naranja-rojo: #F34910;
  --c-petg-bambu-green: #687621;
  --c-petg-bronce: #A06E3B;
  --c-petg-rojo: #C32B2B;
  --c-asa-blanco: #F4F4F1;
  --c-asa-negro: #202124;
}