/* ============================================================
   RuniverseHub Theme — variables CSS portables a PHP
   Incluir desde PHP con:
   <link rel="stylesheet" href="/assets/css/runiverse-theme.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Colores base (HSL) */
  --rh-bg: 228 20% 6%;
  --rh-bg-elev: 228 18% 10%;
  --rh-surface: 228 14% 14%;
  --rh-surface-2: 228 14% 16%;
  --rh-border: 228 14% 18%;
  --rh-border-strong: 228 14% 24%;

  --rh-text: 210 20% 95%;
  --rh-text-muted: 215 15% 55%;
  --rh-text-subtle: 215 15% 40%;

  /* Acentos verde / cian */
  --rh-primary: 160 84% 39%;
  --rh-primary-strong: 160 84% 50%;
  --rh-primary-fg: 228 20% 6%;

  --rh-accent: 187 92% 50%;        /* cian */
  --rh-accent-fg: 228 20% 6%;

  /* Estados */
  --rh-success: 152 76% 44%;
  --rh-warning: 40 96% 56%;
  --rh-danger: 0 84% 60%;
  --rh-info: 200 92% 56%;

  /* Gradientes */
  --rh-grad-primary: linear-gradient(135deg, hsl(var(--rh-primary)) 0%, hsl(var(--rh-accent)) 100%);
  --rh-grad-hero: linear-gradient(180deg, hsl(var(--rh-bg)) 0%, hsl(var(--rh-bg-elev)) 100%);
  --rh-grad-card: linear-gradient(180deg, hsl(var(--rh-surface)) 0%, hsl(var(--rh-bg-elev)) 100%);

  /* Sombras */
  --rh-shadow-sm: 0 1px 2px hsl(228 20% 2% / .4);
  --rh-shadow-md: 0 4px 16px hsl(228 20% 2% / .5);
  --rh-shadow-glow: 0 0 40px hsl(var(--rh-primary) / .18);

  /* Radios */
  --rh-r-sm: 6px;
  --rh-r-md: 10px;
  --rh-r-lg: 14px;
  --rh-r-xl: 20px;
  --rh-r-pill: 9999px;

  /* Tipografía */
  --rh-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --rh-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --rh-space-1: 4px;
  --rh-space-2: 8px;
  --rh-space-3: 12px;
  --rh-space-4: 16px;
  --rh-space-5: 24px;
  --rh-space-6: 32px;
  --rh-space-7: 48px;
  --rh-space-8: 64px;

  /* Layout */
  --rh-container: 1200px;
  --rh-navbar-h: 64px;
}

/* Reset mínimo y base */
html, body { background: hsl(var(--rh-bg)); color: hsl(var(--rh-text)); }
body { font-family: var(--rh-font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--rh-font-display); font-weight: 700; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }