/* ============================================================
   NS Review App — Liquid Glass Design Tokens
   Aesthetic: Apple iOS 17 / macOS Sonoma vibe
   Brand accent: NS peach. Primary CTA: NS blue.
   ============================================================ */

:root {
  /* === Brand NS (acentos identidad) === */
  --ns-peach:        #FCC8A4;
  --ns-peach-deep:   #F8B07C;
  --ns-peach-soft:   rgba(252, 200, 164, 0.18);
  --ns-peach-glow:   rgba(248, 176, 124, 0.42);

  /* === Brand NS (CTA primaria) === */
  --ns-blue:         #3A54F7;
  --ns-blue-deep:    #2840CC;
  --ns-blue-soft:    rgba(58, 84, 247, 0.10);
  --ns-blue-glow:    rgba(58, 84, 247, 0.42);

  /* === Base === */
  --ink:             #0A0A0F;
  --ink-soft:        #1F1F28;
  --paper:           #FAFAFB;
  --paper-2:         #F4F4F7;

  /* === Tinta / textos === */
  --text:            #0A0A0F;
  --text-dim:        #4A4A55;
  --text-muted:      #7A7A85;
  --text-faint:      #A8A8B2;
  --text-on-blue:    #FFFFFF;

  /* === Status === */
  --status-revision:    var(--ns-peach);
  --status-en-progreso: #FFE08A;
  --status-resuelto:    #5BC489;
  --status-resuelto-soft: rgba(91, 196, 137, 0.14);
  --status-aprobado:    #4DAF7C;
  --status-aprobado-soft: rgba(77, 175, 124, 0.14);
  --status-error:       #E76F51;
  --status-error-soft:  rgba(231, 111, 81, 0.12);

  /* === Glass tier (translucencias) === */
  --glass-50:    rgba(255, 255, 255, 0.42);
  --glass-65:    rgba(255, 255, 255, 0.55);
  --glass-80:    rgba(255, 255, 255, 0.68);
  --glass-95:    rgba(255, 255, 255, 0.82);
  --glass-edge:    rgba(255, 255, 255, 0.75);
  --glass-edge-2:  rgba(255, 255, 255, 0.35);
  --glass-inner:   inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 1px rgba(255,255,255,0.18);
  --glass-shadow:  0 8px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);

  /* === Hairlines === */
  --hairline:    rgba(10, 10, 15, 0.08);
  --hairline-2:  rgba(10, 10, 15, 0.05);
  --hairline-strong: rgba(10, 10, 15, 0.14);

  /* === Radii (Apple-scale) === */
  --r-pill: 999px;
  --r-2xl:  28px;
  --r-xl:   22px;
  --r-lg:   18px;
  --r-md:   12px;
  --r-sm:   8px;
  --r-xs:   4px;

  /* alias legacy */
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);

  /* === Profundidad (4 capas) === */
  --depth-0:    0 1px 2px rgba(15, 23, 42, 0.03);
  --depth-1:    0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --depth-2:    0 12px 32px -8px rgba(15, 23, 42, 0.14), 0 2px 4px rgba(15, 23, 42, 0.04);
  --depth-3:    0 24px 64px -12px rgba(15, 23, 42, 0.22), 0 4px 8px rgba(15, 23, 42, 0.06);
  --depth-blue: 0 12px 36px -6px rgba(58, 84, 247, 0.45), 0 2px 6px rgba(58, 84, 247, 0.28);
  --depth-peach:0 12px 36px -6px rgba(248, 176, 124, 0.42), 0 2px 6px rgba(248, 176, 124, 0.28);
  --depth-pin:  0 4px 14px -2px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.14);

  /* alias legacy */
  --shadow-sm: var(--depth-0);
  --shadow-md: var(--depth-1);
  --shadow-pin: var(--depth-pin);

  /* === Blurs === */
  --blur-soft: blur(14px) saturate(180%);
  --blur-mid:  blur(24px) saturate(200%);
  --blur-deep: blur(40px) saturate(210%);

  /* === Animación (curvas Apple-style) === */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  140ms;
  --dur:       220ms;
  --dur-slow:  420ms;

  /* === Tipografía === */
  --font-display: "Montserrat", -apple-system, sans-serif;
  --font-sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* === Espaciado === */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* === Z-index === */
  --z-mesh:    0;
  --z-base:    1;
  --z-nav:     20;
  --z-overlay: 40;
  --z-popup:   60;
  --z-dialog:  80;
  --z-toast:   100;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ============================================================
   BODY · gradient mesh + dot grid (background fijo)
   ============================================================ */
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--text);
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-mesh);
  background:
    radial-gradient(900px 700px at 8% -8%, rgba(252, 200, 164, 0.34), transparent 55%),
    radial-gradient(800px 600px at 92% 10%, rgba(187, 207, 255, 0.32), transparent 55%),
    radial-gradient(900px 700px at 60% 92%, rgba(255, 220, 240, 0.24), transparent 60%),
    radial-gradient(700px 500px at 12% 88%, rgba(190, 240, 220, 0.20), transparent 55%);
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-mesh);
  background-image: radial-gradient(rgba(10,10,15,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.30;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 80%);
}

/* Typography */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
h1 { font-size: 38px; line-height: 1.05; font-weight: 800; }
h2 { font-size: 28px; line-height: 1.1;  }
h3 { font-size: 20px; line-height: 1.2;  }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; }
.mono { font-family: var(--font-mono); }
.caps {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.muted { color: var(--text-muted); }
.dim   { color: var(--text-dim); }