/* =========================================
   ALISKRON — shared/global.css
   Reset, variables, tipografía global
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Mono:wght@300;400&display=swap');

:root {
  /* Palette */
  --cliff-dark:  #1a1f2e;
  --cliff-mid:   #2d3a4a;
  --sea-deep:    #1b4965;
  --sea-mid:     #2a6f97;
  --sea-light:   #61a5c2;
  --foam:        #a9d6e5;
  --salt:        #e8f4f8;
  --sand:        #c9b99a;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--cliff-dark);
  color: var(--salt);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(0.85rem, 1vw + 0.5rem, 1rem);
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---- Background texture global ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(27,73,101,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(42,111,151,0.2) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Animations globales ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.85); }
}

/* ---- Responsive base ---- */
@media (max-width: 600px) {
  :root { --space-xl: 4rem; --space-lg: 2rem; }
}