/* ============================================
   SEUWEB — PIRINEO EDITORIAL (Gate 0 craft)
   Estándar de la casa: primero caro en estático
   Paleta fría glaciar + cyan solo como firma interactiva
   ============================================ */

:root {
  /* Typography — editorial first */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-display-sans: "Archivo", "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Type scale (editorial rhythm) */
  --text-hero: clamp(3.1rem, 9.2vw, 6.75rem);
  --text-section: clamp(2.4rem, 5.6vw, 4.4rem);
  --text-card-title: clamp(1.15rem, 2vw, 1.45rem);
  --text-body: 1.05rem;
  --text-small: 0.875rem;
  --text-micro: 0.72rem;
  --leading-tight: 0.96;
  --leading-snug: 1.2;
  --leading-body: 1.65;
  --tracking-display: -0.035em;
  --tracking-label: 0.18em;

  /* Motion — surgical, not cinematic dump */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-premium: cubic-bezier(0.23, 1.0, 0.32, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --dur-ui: 220ms;
  --dur-reveal: 700ms;

  /* Spacing — silence is material */
  --space-section: clamp(6.5rem, 16vh, 11rem);
  --space-block: clamp(2rem, 5vw, 4rem);
  --space-hero-gap: clamp(1.25rem, 3vw, 2rem);
  --max-width: 78rem;
  --max-prose: 38rem;
  --nav-height: 4.25rem;
  --header-total: var(--nav-height);

  /* Radii — quieter */
  --radius-sm: 0.3rem;
  --radius-md: 0.55rem;
  --radius-lg: 0.9rem;
  --radius-xl: 1.35rem;
  --radius-full: 9999px;

  /* Shadows — soft depth, not neon glow default */
  --shadow-soft: 0 28px 90px -28px rgba(0, 0, 0, 0.72);
  --shadow-glow: 0 0 48px -18px rgba(125, 168, 198, 0.22);
  --shadow-card: 0 18px 56px -18px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--color-border);
  --shadow-glass: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);

  /* Z-index */
  --z-preloader: 999;
  --z-progress: 80;
  --z-nav: 70;
  --z-fab: 60;
  --z-modal: 100;

  --color-transition: 0.4s var(--ease-out-expo);

  /* =========================================
     PALETTE — glacial void / bone / cyan firma
     ========================================= */
  color-scheme: dark;

  --color-bg: #06080c;
  --color-bg-elevated: #0a0d12;
  --color-surface: #0e1218;
  --color-surface-elevated: #151a22;
  --color-surface-glass: rgba(10, 14, 20, 0.78);

  /* Bone text (not pure white — quieter) */
  --color-text: #f2f0eb;
  --color-text-muted: #9aa3ad;
  --color-text-faint: #6a7380;

  /* Signature accent — cyan only for action / focus */
  --color-accent: #5ed7e8;
  --color-accent-light: #8ae4f0;
  --color-accent-hover: #a8eef7;
  --color-accent-contrast: #06080c;

  /* Glacier secondary (replaces loud violet as structure) */
  --color-violet: #6d8fad;
  --color-violet-light: #8eabc4;
  --color-violet-glow: rgba(109, 143, 173, 0.22);

  /* Warm gold — scarce (price, exclusivity) */
  --color-gold: #c4a574;
  --color-gold-light: #d4bb90;
  --color-gold-glow: rgba(196, 165, 116, 0.16);

  /* Supporting */
  --color-silver: #d9dde3;
  --color-border: rgba(242, 240, 235, 0.07);
  --color-border-strong: rgba(242, 240, 235, 0.14);
  --color-border-accent: rgba(94, 215, 232, 0.35);

  --color-glow: rgba(94, 215, 232, 0.1);
  --color-glow-strong: rgba(94, 215, 232, 0.22);
  --color-shadow: rgba(0, 0, 0, 0.68);

  --color-nav-bg: rgba(6, 8, 12, 0.9);
  --color-overlay: rgba(6, 8, 12, 0.94);

  --color-frame: #12161d;
  --color-frame-border: rgba(242, 240, 235, 0.09);
  --color-hover-surface: rgba(94, 215, 232, 0.04);

  /* Gradients — cold grade, not neon wash */
  --gradient-hero: linear-gradient(
    180deg,
    rgba(6, 8, 12, 0.2) 0%,
    rgba(6, 8, 12, 0.5) 42%,
    rgba(6, 8, 12, 0.88) 78%,
    rgba(6, 8, 12, 0.98) 100%
  );
  --gradient-vignette: radial-gradient(
    ellipse at 42% 35%,
    transparent 28%,
    rgba(6, 8, 12, 0.55) 72%,
    rgba(6, 8, 12, 0.85) 100%
  );
  --gradient-gold: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  --gradient-cyan-violet: linear-gradient(135deg, var(--color-violet-light), var(--color-accent));

  --gradient-progress: linear-gradient(90deg, var(--color-violet), var(--color-accent));
  --color-strike: rgba(154, 163, 173, 0.4);

  /* Robot tokens — quieter */
  --robot-body: var(--color-surface-elevated);
  --robot-shell: var(--color-bg);
  --robot-stroke: var(--color-border-strong);
  --robot-ring: var(--color-violet-light);
  --robot-eye: var(--color-accent);
  --robot-eye-deep: var(--color-accent);
  --robot-thruster: var(--color-violet);

  /* Constelación — barely there (not demo) */
  --constelacion-dot: 125, 168, 198;
  --constelacion-line: 109, 143, 173;
  --constelacion-opacity: 0.12;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --color-transition: 0s;
    --ease-out-expo: linear;
    --ease-premium: linear;
    --dur-ui: 0ms;
    --dur-reveal: 0ms;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-text: #ffffff;
    --color-border: rgba(242, 240, 235, 0.2);
  }
}