/* Mejía Villegas · sistema visual compartido
   Usar estos tokens en todas las nuevas internas antes de crear valores locales. */
:root {
  /* Color */
  --mv-color-ink: #1c1e1d;
  --mv-color-night: #171919;
  /* Accessible brand red for normal-size text on light surfaces.
     Previous #dc2b25 was under 4.5:1 on paper. */
  --mv-color-red: #b9201b;
  --mv-color-red-hover: #971713;
  --mv-color-red-on-dark: #ff6b61;
  --mv-color-red-bright: var(--mv-color-red-on-dark);
  --mv-color-paper: #f6f3ed;
  --mv-color-sand: #e6dfd4;
  --mv-color-sand-soft: #eae7e1;
  --mv-color-field: #f7f4ef;
  --mv-color-line: #d8d1c6;
  /* Secondary copy above 4.5:1 on paper and sand. */
  --mv-color-muted: #66625b;
  --mv-color-white: #ffffff;
  --mv-color-dark-muted: #c6c6c3;

  /* Tipografía */
  --mv-font-display: 'Playfair Display', Georgia, serif;
  --mv-font-body: 'DM Sans', Arial, sans-serif;
  --mv-font-sans: var(--mv-font-body);
  --mv-type-label: 12px; /* experiment -3px: 9px */
  --mv-type-micro: 12px; /* experiment -3px: 9px */
  --mv-type-meta: 12px; /* experiment -3px: 9px */
  --mv-type-action: 12px; /* experiment -3px: 9px */
  --mv-type-body-sm: 14px; /* experiment -3px: 11px */
  --mv-type-body: 15px; /* experiment -3px: 12px */
  --mv-type-body-lg: 16px; /* experiment -3px: 13px */
  --mv-type-control: 16px; /* experiment -3px: 13px */
  --mv-type-card-title: 30px; /* experiment -3px: 27px */
  --mv-type-section: clamp(42px, 4.4vw, 64px); /* experiment -3px: clamp(39px, calc(4.4vw - 3px), 61px) */
  --mv-type-hero: clamp(54px, 5.2vw, 82px); /* experiment -3px: clamp(51px, calc(5.2vw - 3px), 79px) */
  /* h1 stays on the experiment. Original: clamp(38px, calc(3.7vw - 3px), 54px) */
  --mv-type-page-title: clamp(35px, calc(3.7vw - 6px), 51px);
  /* h2 stays on the experiment. Original: clamp(30px, 3vw, 42px) */
  --mv-type-section-title: clamp(27px, calc(3vw - 3px), 39px);
  --mv-type-card-heading: clamp(23px, 2.2vw, 30px); /* experiment -3px: clamp(20px, calc(2.2vw - 3px), 27px) */
  --mv-type-lead: 16px; /* experiment -3px: 13px */
  --mv-type-copy: 14px; /* experiment -3px: 11px */
  --mv-type-interface: 15px; /* experiment -3px: 12px */

  /* Retícula y ritmo */
  --mv-page-gutter: clamp(24px, 4vw, 64px);
  --mv-section-space: clamp(72px, 8vw, 120px);
  --mv-section-space-compact: clamp(48px, 6vw, 82px);
  --mv-content-measure: 68ch;
  --mv-card-padding: clamp(20px, 2vw, 30px);
  --mv-card-min: 20rem;

  /* Breakpoints. Custom properties cannot be used in @media conditions,
     so copy these literals: max-width 1020px (md), max-width 720px (sm). */
  --mv-bp-md: 1020px;
  --mv-bp-sm: 720px;

  /* Forma y movimiento */
  --mv-space-page: max(6vw, 30px);
  --mv-content-max: 1320px;
  --mv-control-height: 52px;
  --mv-control-padding-x: 18px;
  --mv-border: 1px solid var(--mv-color-line);
  --mv-focus-color: #ffffff;
  --mv-focus-ring: 0 0 0 2px var(--mv-color-night), 0 0 0 5px var(--mv-focus-color);
  --mv-focus-ring-dark: 0 0 0 2px var(--mv-color-night), 0 0 0 5px var(--mv-color-red);
  --mv-color-success: #2d6a48;
  --mv-color-error: #a8221e;
  --mv-color-disabled: #a7a29a;
  --mv-motion-fast: 180ms ease;
  --mv-motion-standard: 300ms cubic-bezier(.2, .7, .2, 1);
  --mv-motion-slow: 700ms ease;
}

@media (max-width: 760px) {
  :root {
    /* h1 stays on the experiment. Original: clamp(34px, calc(11vw - 4px), 38px) */
    --mv-type-page-title: clamp(31px, calc(11vw - 7px), 35px);
    /* h2 stays on the experiment. Original: 30px */
    --mv-type-section-title: 27px;
    --mv-type-card-heading: clamp(23px, 6vw, 27px); /* experiment -3px: clamp(20px, calc(6vw - 3px), 24px) */
  }
}

/* Blog, header, and footer keep the pre-experiment scale. Revert map: docs/type-scale-minus-3px.md */
body.mv-type-original,
.mv-site-header,
.site-footer {
  --mv-type-label: 12px;
  --mv-type-micro: 12px;
  --mv-type-meta: 12px;
  --mv-type-action: 12px;
  --mv-type-body-sm: 14px;
  --mv-type-body: 15px;
  --mv-type-body-lg: 16px;
  --mv-type-control: 16px;
  --mv-type-card-title: 30px;
  --mv-type-section: clamp(42px, 4.4vw, 64px);
  --mv-type-hero: clamp(54px, 5.2vw, 82px);
  --mv-type-page-title: clamp(38px, calc(3.7vw - 3px), 54px);
  --mv-type-section-title: clamp(30px, 3vw, 42px);
  --mv-type-card-heading: clamp(23px, 2.2vw, 30px);
  --mv-type-lead: 16px;
  --mv-type-copy: 14px;
  --mv-type-interface: 15px;
  --mv-text-h1: var(--mv-type-page-title);
  --mv-text-h2: var(--mv-type-section-title);
  --mv-text-h3: var(--mv-type-card-heading);
  --mv-text-lead: var(--mv-type-lead);
  --mv-text-body: var(--mv-type-copy);
  --mv-text-control: var(--mv-type-interface);
  --mv-text-label: var(--mv-type-label);
}

@media (max-width: 760px) {
  body.mv-type-original,
  .mv-site-header,
  .site-footer {
    --mv-type-page-title: clamp(34px, calc(11vw - 4px), 38px);
    --mv-type-section-title: 30px;
    --mv-type-card-heading: clamp(23px, 6vw, 27px);
  }
}

/* Sistema tipográfico: la interfaz no utiliza variantes cursivas. */
em,
i {
  font-style: normal !important;
}

/* Estados compartidos para todas las rutas finales. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 0;
  box-shadow: var(--mv-focus-ring);
}

:where(.mv-site-header, .site-footer, .detail-virtual, .executed-feature)
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: var(--mv-focus-ring-dark);
}

:where(button, [role="button"], input[type="button"], input[type="submit"]) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, [role="button"], input[type="button"], input[type="submit"]):active:not(:disabled) {
  transform: translateY(1px);
}

:where(button, input, select, textarea):disabled,
:where(button, [role="button"])[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  filter: grayscale(.2);
}

:where(input, select, textarea)[aria-invalid="true"],
:where(input, select, textarea):user-invalid {
  border-color: var(--mv-color-error) !important;
  box-shadow: 0 0 0 1px var(--mv-color-error);
}

:where(input, select, textarea)[aria-invalid="true"]:focus-visible,
:where(input, select, textarea):user-invalid:focus-visible {
  box-shadow: 0 0 0 2px var(--mv-color-paper), 0 0 0 5px var(--mv-color-error);
}

[aria-busy="true"] {
  cursor: progress;
}

.mv-status-success {
  color: var(--mv-color-success);
  font-size: var(--mv-type-body-sm);
}

.mv-status-error,
.mv-field-error {
  color: var(--mv-color-error);
  font-size: var(--mv-type-body-sm);
}

.mv-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

@media (hover: hover) {
  :where(a, button, [role="button"]):not(:disabled) {
    transition-duration: var(--mv-motion-fast);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Contrast bridge for page-local palettes after accessible token update. */
.projects-page {
  --red: var(--mv-color-red) !important;
  --muted: var(--mv-color-muted) !important;
}

.contact-page {
  --red: var(--mv-color-red) !important;
  --muted: var(--mv-color-muted) !important;
}

.about-page .about-purpose > div > p:first-child,
.executed-page .executed-stage-copy .executed-kicker {
  color: var(--mv-color-red-on-dark) !important;
}