/* ============================================================
   CUBICUP — DESIGN TOKENS (rebrand 2026)
   Única fuente de verdad para colores, tipografía y espaciados.

   Los valores salen TAL CUAL de las variables del Figma "Cubicup-Web"
   (página "Home New Concept - Iteration #2"). El nombre de cada variable
   es el del Figma con "/" cambiado por "-": `heading/xl/size` → --heading-xl-size.
   Si el Figma cambia, se cambia aquí y lo hereda todo el theme.
   ============================================================ */

:root {

  /* ---------- BASE (escala de espaciado del Figma, en px) ---------- */
  --base-hairline: 0.2px;
  --base-thin: 0.5px;
  --base-2: 2px;
  --base-4: 4px;
  --base-8: 8px;
  --base-12: 12px;
  --base-16: 16px;
  --base-20: 20px;
  --base-24: 24px;
  --base-32: 32px;
  --base-40: 40px;
  --base-120: 120px;

  /* ---------- COLOR · fondos ---------- */
  --background-page: #fef8f3;
  --background-subtle: #f8efe7;
  --background-navy: #0c2340;

  /* ---------- COLOR · texto ---------- */
  --text-primary: #000000;
  --text-secondary: #5f564e;
  --text-inverse: #ffffff;
  --text-on-brand-primary: #ffffff;
  --text-on-brand-subtle: #ffffff99;
  --text-action-default-default: #000000;
  --text-action-on-brand-default: #ffffff;

  /* ---------- COLOR · iconos, logo, navegación ---------- */
  --icon-primary: #000000;
  --icon-inverse: #ffffff;
  --logo-on-brand: #ffffff;
  --nav-item-on-brand-default: #ffffff;

  /* ---------- COLOR · opacidades ---------- */
  --opacity-dark-20: #00000033;
  --opacity-dark-40: #00000066;
  --ink-warm-400: #9a8e84;       /* ink/warm/400: texto apagado (palabras inactivas del cubo) */
  --utility-focus-500: #ff5a1f;  /* utility/focus/500: paso activo del sistema */

  /* ---------- COLOR · material glass ---------- */
  --glass-background-default: #28282866;
  --glass-text-primary: #ffffff;
  --glass-text-secondary: #ffffffcc;

  /* ---------- COLOR · botones ---------- */
  --button-primary-background-default: #0c2340;
  --button-primary-text-default: #ffffff;
  --button-primary-icon-default: #ffffff;
  --button-primary-text-disabled: #00000066;

  --button-outline-background-default: #ffffff00;
  --button-outline-border-default: #0c2340;
  --button-outline-text-default: #0c2340;
  --button-outline-icon-default: #0c2340;
  --button-outline-inverse-text-default: #ffffff;

  --button-inverse-background-default: #ffffff;
  --button-inverse-text-default: #0c2340;
  --button-inverse-icon-default: #0c2340;

  /* ---------- COLOR · componentes ---------- */
  --accordion-default-title: #000000;
  --accordion-default-body: #000000;
  --accordion-default-border: #00000033;
  --process-card-default-body: #000000;
  --tag-text: #000000;

  /* ---------- TIPOGRAFÍA · familia ----------
     El Figma usa "Saans" (Displaay, de pago). Si sus .woff2 están en /fonts,
     inc/enqueue.php declara el @font-face y se usa; si no, cae a Inter. */
  --font-family-title: "Saans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-line-height-20: 20px;
  --font-line-height-24: 24px;

  /* ---------- TIPOGRAFÍA · estilos (size / line-height / weight / tracking) ----------
     El tracking del Figma va en % del cuerpo (8 = 0.08em); -1 = -0.01em. */
  --display-xl-size: 80px;      --display-xl-line-height: 80px;      --display-xl-tracking: -0.01em;
  --heading-xxxl-size: 60px;    --heading-xxxl-line-height: 60px;    --heading-xxxl-tracking: -0.01em;
  --heading-xxl-size: 52px;     --heading-xxl-line-height: 52px;     --heading-xxl-tracking: -0.01em;
  --heading-xl-size: 44px;      --heading-xl-line-height: 48px;      --heading-xl-tracking: 0;
  --heading-lg-size: 36px;      --heading-lg-line-height: 40px;      --heading-lg-tracking: -0.01em;
  --title-sm-size: 14px;        --title-sm-line-height: 19px;        --title-sm-weight: 500;
  --body-base-size: 16px;       --body-base-line-height: 24px;
  --body-sm-size: 14px;         --body-sm-line-height: 20px;
  --label-eyebrow-size: 13px;   --label-eyebrow-line-height: 16px;   --label-eyebrow-weight: 500; --label-eyebrow-tracking: 0.08em;
  --label-tag-size: 11px;
  --action-button-size: 13px;   --action-button-line-height: 16px;   --action-button-weight: 500; --action-button-tracking: 0.08em;
  --action-text-size: 11px;     --action-text-line-height: 13px;     --action-text-weight: 500;   --action-text-tracking: 0.1em;
  --nav-item-line-height: 16px; --nav-item-weight: 400;
  --ui-card-eyebrow-size: 10px; --ui-card-eyebrow-line-height: 13px; --ui-card-eyebrow-tracking: 0.2em;
  --ui-card-title-size: 16px;   --ui-card-title-line-height: 20px;   --ui-card-title-tracking: 0.01em;

  /* ---------- LAYOUT ---------- */
  --layout-grid-margin: 32px;
  --layout-grid-gutter: 16px;
  --layout-section-padding-y-compact: 80px;
  --layout-section-padding-y-base: 120px;
  --layout-section-padding-y-extended: 160px;
  --layout-section-title-content-gap-tight: 48px;
  --layout-section-title-content-gap-base: 80px;
  --layout-max: 1440px;

  /* ---------- COMPONENTES ---------- */
  --component-button: 999px;            /* radio del botón (pill) */
  --component-button-height: 44px;
  --component-button-padding-x: 24px;
  --component-button-gap: 12px;
  --component-tag-gap: 4px;
  --component-icon-icon-thin: 1px;
  --component-accordion-item-padding-y: 20px;
  --component-accordion-item-content-gap: 8px;
  --component-ui-card-glass-padding: 10px;
  --component-ui-card-glass-gap: 12px;
  --component-sticky-cta-glass-padding: 10px;
  --component-material-glass-md: 8px;
  --component-material-glass-lg: 16px;
  --ui-card-glass-blur: 12px;           /* efecto "UI Card Glass Effect" (GLASS, radius 12) */

  /* ============================================================
     ALIAS SEMÁNTICOS
     Nombres cortos que usan los componentes del theme y el plugin de
     onboarding. Todos apuntan a variables del Figma: no tienen valor propio.
     ============================================================ */
  --color-brand:          var(--background-navy);
  --color-brand-hover:    #16345a;  /* hover del primario: no está en el Figma */
  --color-bg:             var(--background-page);
  --color-bg-subtle:      var(--background-subtle);
  --color-surface:        #ffffff;
  --color-text:           var(--text-primary);
  --color-text-muted:     var(--text-secondary);
  --color-border:         var(--accordion-default-border);
  --color-bg-dark:        var(--background-navy);
  --color-text-on-dark:   var(--text-on-brand-primary);
  --color-border-on-dark: rgba(255,255,255,.2);

  --font-sans:    var(--font-family-title);
  --font-display: var(--font-family-title);
  --font-body:    var(--font-family-title);
  --fw-light: 300;
  --fw-regular: var(--font-weight-regular);
  --fw-medium: var(--font-weight-medium);
  --fw-semibold: 600;

  --fs-eyebrow: var(--label-eyebrow-size);
  --fs-body:    var(--body-base-size);
  --tracking-eyebrow: var(--label-eyebrow-tracking);

  --space-1: var(--base-4);
  --space-2: var(--base-8);
  --space-3: var(--base-12);
  --space-4: var(--base-16);
  --space-6: var(--base-24);
  --space-8: var(--base-32);
  --space-12: 48px;
  --space-16: 64px;

  --container-max: var(--layout-max);
  --container-pad: var(--layout-grid-margin);

  --radius-sm: var(--base-4);
  --radius-md: var(--component-material-glass-md);
  --radius-lg: var(--component-material-glass-lg);
  --radius-pill: var(--component-button);

  --transition: 0.25s ease;

  /* legado: el skin del onboarding (rebrand.css) aún lee --cb-ink */
  --cb-ink: var(--text-primary);
}

/* Tablet y móvil: el Figma solo define desktop (1440). Se reducen márgenes,
   paddings de sección y titulares en la misma proporción. */
@media (max-width: 1024px) {
  :root {
    --layout-grid-margin: 24px;
    --layout-section-padding-y-extended: 120px;
    --layout-section-padding-y-base: 96px;
    --layout-section-title-content-gap-base: 56px;
    --display-xl-size: 60px;   --display-xl-line-height: 60px;
    --heading-xxxl-size: 48px; --heading-xxxl-line-height: 50px;
    --heading-xxl-size: 42px;  --heading-xxl-line-height: 44px;
    --heading-xl-size: 36px;   --heading-xl-line-height: 40px;
    --heading-lg-size: 30px;   --heading-lg-line-height: 34px;
  }
}
@media (max-width: 640px) {
  :root {
    --layout-grid-margin: 16px;
    --layout-section-padding-y-extended: 88px;
    --layout-section-padding-y-base: 72px;
    --layout-section-padding-y-compact: 56px;
    --layout-section-title-content-gap-base: 40px;
    --layout-section-title-content-gap-tight: 32px;
    --display-xl-size: 44px;   --display-xl-line-height: 46px;
    --heading-xxxl-size: 36px; --heading-xxxl-line-height: 38px;
    --heading-xxl-size: 32px;  --heading-xxl-line-height: 35px;
    --heading-xl-size: 28px;   --heading-xl-line-height: 32px;
    --heading-lg-size: 26px;   --heading-lg-line-height: 30px;
  }
}