/* Codevelia — overrides y utilidades extra (Tailwind sirve el grueso vía CDN) */

:root {
  --navy: #0A1F44;
  --navy-deep: #00081e;
  --navy-soft: #1a325a;
  --teal: #00B2A9;
  --teal-soft: #50dad1;
  --teal-light: #6ef4ea;
  --gray-100: #F2F4F7;
  --gray-200: #e7eeff;
  --gray-300: #D8DEE8;
  --ink: #0f1c2f;
  --ink-mute: #44464e;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #f9f9ff; color: var(--ink); }
.font-display { font-family: 'Poppins', system-ui, sans-serif; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

/* nav active underline */
.nav-link { position: relative; transition: color .2s ease, background-color .2s ease; }
.nav-link[aria-current="page"] { color: var(--teal); font-weight: 600; }
.nav-link[aria-current="page"]::after {
  content: ''; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  width: 24px; height: 2px; background: var(--teal);
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Soft hover lift on cards */
.card-lift { transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease; }
.card-lift:hover { box-shadow: 0 16px 40px -12px rgba(10,31,68,0.08); border-color: var(--teal); }

/* Code block */
.codeblock { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

/* Hexagonal grid pattern (decorative) */
.bg-hex {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Diagonal accent shape */
.diag-accent {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}