/* ==========================================================
   Ibarra House Body Shop — theme.css
   Tokens de marca, gamas de negro, texturas y variables --bs-*
   Se carga después de bootstrap.min.css
   ========================================================== */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Gama de negros: de impacto (n0) a superficies de lectura (n4) */
  --ih-n0: #000000;
  --ih-n1: #0A0A0B;
  --ih-n2: #121214;
  --ih-n3: #1A1A1D;
  --ih-n4: #232327;
  --ih-n5: #2F2F34;
  --ih-n6: #45454C;

  /* Texto */
  --ih-text: #F4F4F5;
  --ih-text-2: #B4B4BA;
  --ih-text-3: #84848C;

  /* Rojo Ibarra (del logotipo) */
  --ih-red: #DE2B41;
  --ih-red-hot: #FF4D61;
  --ih-red-deep: #5E0B18;
  --ih-red-glow: rgba(222, 43, 65, .35);

  /* Estados */
  --ih-ok: #3DDC84;

  /* Tipografía */
  --ih-font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --ih-font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Forma y ritmo */
  --ih-radius: 14px;
  --ih-radius-sm: 8px;
  --ih-gap: clamp(.5rem, 1vw, .75rem);
  --ih-section: clamp(4rem, 9vw, 8rem);
  --ih-ease: cubic-bezier(.2, .7, .2, 1);
  --ih-bar-h: 72px;

  /* Fibra de carbono (CSS puro, no pesa nada) */
  --ih-carbon:
    linear-gradient(27deg, #151517 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151517 5px, transparent 5px) 10px 0,
    linear-gradient(27deg, #222226 5px, transparent 5px) 0 10px,
    linear-gradient(207deg, #222226 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1B1B1E 10px, transparent 10px),
    linear-gradient(#1D1D20 25%, #19191B 25%, #19191B 50%, transparent 50%, transparent 75%, #242428 75%, #242428);

  /* Bootstrap */
  --bs-body-bg: var(--ih-n0);
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: var(--ih-text);
  --bs-body-color-rgb: 244, 244, 245;
  --bs-body-font-family: var(--ih-font-body);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-primary: #DE2B41;
  --bs-primary-rgb: 222, 43, 65;
  --bs-secondary-color: var(--ih-text-2);
  --bs-link-color: var(--ih-text);
  --bs-link-color-rgb: 244, 244, 245;
  --bs-link-hover-color: var(--ih-red-hot);
  --bs-link-hover-color-rgb: 255, 77, 97;
  --bs-border-color: var(--ih-n5);
  --bs-border-radius: var(--ih-radius-sm);
  --bs-focus-ring-color: rgba(255, 77, 97, .5);
  --bs-emphasis-color: #fff;

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
}

html {
  overflow-x: clip; /* evita que las animaciones de entrada ensanchen la vista en móvil */
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 90px);
  background: var(--ih-n0);
}

body {
  background: var(--ih-n0);
  color: var(--ih-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Transiciones nativas entre páginas (View Transitions API) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ih-vt-out .28s var(--ih-ease) both; }
::view-transition-new(root) { animation: ih-vt-in .42s var(--ih-ease) both; }
@keyframes ih-vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes ih-vt-in { from { opacity: 0; transform: translateY(14px); } }

::selection { background: var(--ih-red); color: #fff; }

:focus-visible {
  outline: 3px solid var(--ih-red-hot);
  outline-offset: 3px;
  border-radius: 4px;
}

img, video { max-width: 100%; height: auto; }

a { text-underline-offset: 4px; }

/* Utilidades de superficie */
.ih-surface-0 { background: var(--ih-n0); }
.ih-surface-1 { background: var(--ih-n1); }
.ih-surface-2 { background: var(--ih-n2); }
.ih-surface-3 { background: var(--ih-n3); }
.ih-carbon { background: var(--ih-carbon); background-color: #131315; background-size: 20px 20px; }

.visually-hidden-focusable:focus {
  position: fixed !important;
  top: 1rem; left: 1rem;
  z-index: 2000;
  background: var(--ih-red);
  color: #fff;
  padding: .75rem 1rem;
  border-radius: var(--ih-radius-sm);
}

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