/* =============================================================
   home-port.css — Vicente Hernaiz Portfolio (home only)
   Port of the Next.js home (Vicente-portfolio-next, 2026-10-14
   version) into V1, 2026-10-20. Loaded by index.html ONLY, after
   styles.css and before the home page CSS.

   1. Tokens the Next home CSS (home.css / vision.css / home-b.css,
      copied verbatim from the Next repo) relies on that V1's shared
      styles.css doesn't define yet — values copied 1:1 from the
      Next repo's styles.css. Scoped to this page so the other V1
      pages keep their current type scale untouched.
   2. Body copy on the type scale (Next styles.css `body` rule).
   3. Low-radius layer (Next variants.css, default `radius=on`),
      active via <html data-radius="on"> on index.html.
   Figma sync: ⚠️ PENDIENTE — the --t-* roles mirror
   portfolio-v2/tokens/context/web-*.json (same source as Next).
   ============================================================= */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  --fade-bg:       var(--bg-main);
  --bg-chip-hover: #251f47;
  --gap-subtitle:  var(--space-8);
  --elev-float:    0 2px 8px rgba(0,0,0,0.45), 0 16px 48px rgba(0,0,0,0.6);
}

/* ── Type scale (phase 3) — V2 design-system roles ───────────────
   Source: portfolio-v2/tokens/context/web-{phone,tablet,desktop}.json
   (+ research/01-design-system-foundations.md §2). V1 selectors point
   to these via scripts/type-scale-map.py (table: visual-diff/phase3/
   type-mapping.md). Weights stay V1's (Geist 400/500); only size,
   line-height and tracking come from V2. Breakpoints: phone <640,
   tablet 640–1023, desktop ≥1024. Form inputs stay 16px (body). */
:root {
  --t-display-fs: 64px; --t-display-lh: 64px; --t-display-ls: -0.04em;
  --t-h1-fs: 48px; --t-h1-lh: 52px; --t-h1-ls: -0.03em;
  --t-h2-fs: 32px; --t-h2-lh: 40px; --t-h2-ls: -0.022em;
  --t-h3-fs: 24px; --t-h3-lh: 32px; --t-h3-ls: -0.015em;
  --t-h4-fs: 20px; --t-h4-lh: 28px; --t-h4-ls: -0.015em;
  --t-title-fs: 18px; --t-title-lh: 24px; --t-title-ls: -0.008em;
  --t-body-lg-fs: 18px; --t-body-lg-lh: 28px; --t-body-lg-ls: -0.008em;
  --t-body-fs: 16px; --t-body-lh: 24px; --t-body-ls: 0em;
  --t-body-sm-fs: 14px; --t-body-sm-lh: 20px; --t-body-sm-ls: 0em;
  --t-label-fs: 14px; --t-label-lh: 20px; --t-label-ls: 0em;
  --t-caption-fs: 13px; --t-caption-lh: 20px; --t-caption-ls: 0.01em;
  --t-overline-fs: 12px; --t-overline-lh: 16px; --t-overline-ls: 0.08em;
  --t-mono-fs: 14px; --t-mono-lh: 20px; --t-mono-ls: 0em;
}
@media (max-width: 1023px) {
  :root {
    --t-display-fs: 48px; --t-display-lh: 52px; --t-display-ls: -0.03em;
    --t-h1-fs: 40px; --t-h1-lh: 44px; --t-h1-ls: -0.03em;
    --t-h2-fs: 28px; --t-h2-lh: 36px; --t-h2-ls: -0.022em;
    --t-h3-fs: 22px; --t-h3-lh: 28px; --t-h3-ls: -0.015em;
    --t-h4-fs: 18px; --t-h4-lh: 24px; --t-h4-ls: -0.008em;
    --t-title-fs: 17px; --t-title-lh: 24px; --t-title-ls: -0.008em;
    --t-body-lg-fs: 17px; --t-body-lg-lh: 28px; --t-body-lg-ls: -0.008em;
    --t-body-fs: 16px; --t-body-lh: 24px; --t-body-ls: 0em;
    --t-body-sm-fs: 14px; --t-body-sm-lh: 20px; --t-body-sm-ls: 0em;
    --t-label-fs: 14px; --t-label-lh: 20px; --t-label-ls: 0em;
    --t-caption-fs: 13px; --t-caption-lh: 20px; --t-caption-ls: 0.01em;
    --t-overline-fs: 12px; --t-overline-lh: 16px; --t-overline-ls: 0.08em;
    --t-mono-fs: 13px; --t-mono-lh: 20px; --t-mono-ls: 0.02em;
  }
}
@media (max-width: 639px) {
  :root {
    --t-display-fs: 40px; --t-display-lh: 44px; --t-display-ls: -0.03em;
    --t-h1-fs: 32px; --t-h1-lh: 36px; --t-h1-ls: -0.022em;
    --t-h2-fs: 24px; --t-h2-lh: 32px; --t-h2-ls: -0.015em;
    --t-h3-fs: 20px; --t-h3-lh: 28px; --t-h3-ls: -0.015em;
    --t-h4-fs: 18px; --t-h4-lh: 24px; --t-h4-ls: -0.008em;
    --t-title-fs: 16px; --t-title-lh: 24px; --t-title-ls: -0.008em;
    --t-body-lg-fs: 17px; --t-body-lg-lh: 28px; --t-body-lg-ls: -0.008em;
    --t-body-fs: 16px; --t-body-lh: 24px; --t-body-ls: 0em;
    --t-body-sm-fs: 14px; --t-body-sm-lh: 20px; --t-body-sm-ls: 0em;
    --t-label-fs: 14px; --t-label-lh: 20px; --t-label-ls: 0em;
    --t-caption-fs: 12px; --t-caption-lh: 16px; --t-caption-ls: 0.01em;
    --t-overline-fs: 11px; --t-overline-lh: 16px; --t-overline-ls: 0.08em;
    --t-mono-fs: 13px; --t-mono-lh: 20px; --t-mono-ls: 0.02em;
  }
}

/* ── 2. Body copy ──────────────────────────────────────────── */
body {
  font-size:   var(--t-body-fs);
  line-height: var(--t-body-lh);
}

/* ── 3. Low-radius layer (Next variants.css, radius=on) ────── */
html[data-radius="on"] {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --card-radius: var(--radius-md);
  --chip-radius: var(--radius-sm);
}
/* sm — controls */
html[data-radius="on"] :is(
  .btn-contact, .lang-menu__btn, .lang-menu__option, .ai-topbar, .ai-topbar__send,
  .hero__btn, .sticky-projects__cta, .sticky-projects__cta-secondary, .sticky-projects__block-role-chip,
  .sticky-projects__block-categories span, .contact-btn, .contact-form__submit, .contact-intent,
  .contact-social-btn, .contact-overlay__close, .form-field input, .form-field textarea,
  .filter-bar__input, .filter-bar, .ai-chip, .ai-contact-cta, .ai-input-area__send, .ai-widget__send,
  .ai-widget__send_main, .ai-faq-overlay__close, .ai-modal__close, .ai-modal__input,
  .mobile-nav__ai, .mobile-nav__cta, .mobile-nav__link, .nf__link, .nf__sound, .discover-card__icon,
  .hero__proof-tip, .sidebar__item, .project-card__role-chip, .theme-toggle
) { border-radius: var(--radius-sm); }
html[data-radius="on"] .pixel-dot { border-radius: var(--radius-sm); }
/* md — cards & widgets */
html[data-radius="on"] :is(
  .discover-card, .discover-resume, .project-card, .bento-card, .vision-bento__tile,
  .about .about__group, .ai-widget, .ai-widget__bar, .ai-widget__response, .vision-claude,
  .ai-input-area__wrap, .ai-msg__bubble, .ai-bubble, .access-cta, .contact-page__direct,
  .projects-carousel__item
) { border-radius: var(--radius-md); }
html[data-radius="on"] :is(.discover-card, .discover-resume, .project-card, .bento-card, .vision-bento__tile, .about .about__group, .vision-claude, .access-cta) { overflow: hidden; }
/* lg — large frames, panels, modals, phone sheet */
/* .sticky-projects__block-mobile-image excluded 2026-10-21: radius+overflow clipped its full-bleed gradient fade on phone (Vicente). */
html[data-radius="on"] :is(
  .sticky-projects__card, .discover__photo, .lang-menu__panel,
  .ai-modal__box, .contact-overlay__box, .ai-faq-overlay__panel, .about-masthead__portrait-frame,
  .about-hero-figure__frame
) { border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 900px) {
  html[data-radius="on"] .mobile-nav__bar { border-radius: var(--radius-lg); }
  html[data-radius="on"] .mobile-nav.is-open .mobile-nav__bar { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  html[data-radius="on"] .mobile-nav__panel { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}
/* the 2×2 discover-card / Let's-talk card with 20px padding: icon 4px (min) */