/* ============================================================
   REAL NOW — Design Tokens
   Fuente única de verdad: colores, tipografía, espaciado, sombras.
   Todo el sitio consume estas variables. No edites valores hard-coded
   en otros archivos; cambia aquí y propaga.
   ============================================================ */

/* ============================================================
   THEME — dark is the default. [data-theme="light"] flips surface
   tokens. Brand tokens (gold/emerald) and most accents stay constant
   so brand identity survives the theme switch.
   ============================================================ */
:root {
  color-scheme: dark;

  /* ---- Brand ---- */
  --rn-gold-50:  #fdf6ec;
  --rn-gold-100: #f5e3c2;
  --rn-gold-300: #e8c08d;
  --rn-gold-500: #d4a574;   /* primary accent */
  --rn-gold-700: #a07944;
  --rn-gold-900: #5a4220;

  --rn-emerald-400: #34d399;
  --rn-emerald-500: #10b981; /* PRO accent */
  --rn-emerald-700: #047857;

  --rn-ruby-500:   #ef4444;
  --rn-azure-500:  #3b82f6;

  /* ---- Surfaces (dark luxury — default) ---- */
  --rn-bg:          #0a0d12;
  --rn-bg-elev-1:   #14181f;
  --rn-bg-elev-2:   #1c222c;
  --rn-border:      #2a2f3a;
  --rn-border-soft: #1f232d;

  --rn-text:        #f4f5f7;
  --rn-text-muted:  #a0a6b2;
  --rn-text-dim:    #6b7280;

  /* ---- Glass surfaces (navbar, modals) ---- */
  --rn-nav-bg:          rgba(10,13,18,0.72);
  --rn-nav-bg-scrolled: rgba(10,13,18,0.96);
  --rn-overlay:         rgba(10,13,18,0.85);

  /* ---- Subtle tints for cards/highlights (theme-aware) ---- */
  --rn-tint-gold:    rgba(212,165,116,0.08);
  --rn-tint-emerald: rgba(16,185,129,0.10);
  --rn-tint-ruby:    rgba(239,68,68,0.10);
  --rn-tint-soft:    rgba(255,255,255,0.04);

  /* ---- Aliases consumed by legacy `var(--rn-bg-card, #1a2236)` patterns
         (149 fallback usages across pages — defining these here makes
         every page automatically theme-aware without touching templates) ---- */
  --rn-bg-card:   var(--rn-bg-elev-2);
  --rn-border-2:  var(--rn-border);

  /* ---- Glass surfaces (translucent overlays on top of bg/images) ---- */
  --rn-glass-bg:        rgba(15,19,28,0.72);
  --rn-glass-bg-strong: rgba(15,19,28,0.92);
  --rn-chip-bg:         rgba(11,15,25,0.70);

  /* ---- Chart palette (theme-aware — read by lazy-charts.js) ---- */
  --rn-chart-text:    #a0a6b2;
  --rn-chart-grid:    #1e293b;
  --rn-chart-axis:    #2a2f3a;

  /* ---- Meta (browser chrome) ---- */
  --rn-meta-color: #0a0d12;

  /* ---- Semantic ---- */
  --rn-primary:       var(--rn-gold-500);
  --rn-primary-hover: var(--rn-gold-300);
  --rn-pro:           var(--rn-emerald-500);
  --rn-enterprise:    var(--rn-gold-500);
  --rn-danger:        var(--rn-ruby-500);
  --rn-info:          var(--rn-azure-500);

  /* ---- Typography ---- */
  --rn-font-display: 'Playfair Display', Georgia, serif;
  --rn-font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rn-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --rn-size-xs:   0.75rem;
  --rn-size-sm:   0.875rem;
  --rn-size-base: 1rem;
  --rn-size-lg:   1.125rem;
  --rn-size-xl:   1.25rem;
  --rn-size-2xl:  1.5rem;
  --rn-size-3xl:  2rem;
  --rn-size-4xl:  2.75rem;
  --rn-size-5xl:  3.75rem;
  --rn-size-6xl:  5rem;

  --rn-leading-tight: 1.1;
  --rn-leading-snug:  1.3;
  --rn-leading-body:  1.55;

  /* ---- Spacing (4px base) ---- */
  --rn-space-1:  4px;
  --rn-space-2:  8px;
  --rn-space-3:  12px;
  --rn-space-4:  16px;
  --rn-space-5:  24px;
  --rn-space-6:  32px;
  --rn-space-7:  48px;
  --rn-space-8:  64px;
  --rn-space-9:  96px;
  --rn-space-10: 128px;

  /* ---- Radius ---- */
  --rn-radius-sm:    6px;   /* chips, tiny pills */
  --rn-radius-md:   10px;   /* small panels, banners (smaller than card) */
  --rn-radius-card: 12px;   /* CANONICAL card surface — use everywhere */
  --rn-radius-lg:   16px;   /* large/featured cards (use sparingly) */
  --rn-radius-xl:   24px;   /* hero / modal */
  --rn-radius-pill: 999px;  /* tags, status badges */

  /* ---- Shadow ---- */
  --rn-shadow-sm:   0 1px 2px rgba(0,0,0,.4);
  --rn-shadow-md:   0 4px 12px rgba(0,0,0,.45);
  --rn-shadow-lg:   0 16px 32px rgba(0,0,0,.55);
  --rn-shadow-gold: 0 8px 24px rgba(212,165,116,.25);

  /* ---- Transitions ---- */
  --rn-t-fast:   120ms cubic-bezier(.4,0,.2,1);
  --rn-t-normal: 200ms cubic-bezier(.4,0,.2,1);
  --rn-t-slow:   400ms cubic-bezier(.4,0,.2,1);

  /* ---- Layout ---- */
  --rn-container:       1280px;
  --rn-container-tight: 960px;
  --rn-navbar-height:   72px;

  /* ---- Z-index ---- */
  --rn-z-base:    1;
  --rn-z-nav:     50;
  --rn-z-overlay: 80;
  --rn-z-modal:   100;
  --rn-z-toast:   200;
}

/* ============================================================
   LIGHT THEME — opt-in via [data-theme="light"] on <html>.
   Anti-flash inline script in base_rn.html sets attr before paint.
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — warm off-white, paper-like (matches brand luxury) */
  --rn-bg:          #f8f5f0;
  --rn-bg-elev-1:   #ffffff;
  --rn-bg-elev-2:   #f1ece4;
  --rn-border:      #e3dccf;
  --rn-border-soft: #ece6da;

  --rn-text:        #1a1d23;
  --rn-text-muted:  #5b6470;
  --rn-text-dim:    #8b94a0;

  /* Gold needs a notch more contrast against white */
  --rn-gold-300: #b88a3e;
  --rn-gold-500: #a07944;
  --rn-gold-700: #6b5028;

  /* Glass — light translucent */
  --rn-nav-bg:          rgba(248,245,240,0.80);
  --rn-nav-bg-scrolled: rgba(248,245,240,0.96);
  --rn-overlay:         rgba(26,29,35,0.55);

  /* Tints stay tonal but shift toward darker for contrast on white */
  --rn-tint-gold:    rgba(160,121,68,0.10);
  --rn-tint-emerald: rgba(4,120,87,0.10);
  --rn-tint-ruby:    rgba(220,38,38,0.10);
  --rn-tint-soft:    rgba(0,0,0,0.04);

  /* Light-variant aliases */
  --rn-bg-card:   #ffffff;
  --rn-border-2:  var(--rn-border);

  /* Glass surfaces — light variant */
  --rn-glass-bg:        rgba(255,255,255,0.78);
  --rn-glass-bg-strong: rgba(255,255,255,0.95);
  --rn-chip-bg:         rgba(255,255,255,0.85);

  /* Chart palette — light */
  --rn-chart-text: #5b6470;
  --rn-chart-grid: #ece6da;
  --rn-chart-axis: #c8bfae;

  --rn-meta-color: #f8f5f0;

  /* Shadows — softer, color-shifted for light surfaces */
  --rn-shadow-sm:   0 1px 2px rgba(0,0,0,.06);
  --rn-shadow-md:   0 4px 12px rgba(0,0,0,.08);
  --rn-shadow-lg:   0 16px 32px rgba(0,0,0,.12);
  --rn-shadow-gold: 0 8px 24px rgba(160,121,68,.20);
}

/* Selection color in light mode */
[data-theme="light"] ::selection {
  background: var(--rn-gold-500);
  color: #fff;
}

/* Scrollbar in light mode */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--rn-bg-elev-2); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--rn-border); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #c8bfae; }

/* ---- Reset + base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--rn-navbar-height) + 16px); }
body {
  margin: 0;
  background: var(--rn-bg);
  color: var(--rn-text);
  font-family: var(--rn-font-sans);
  font-size: var(--rn-size-base);
  line-height: var(--rn-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rn-font-display);
  font-weight: 600;
  line-height: var(--rn-leading-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--rn-space-4) 0;
}
h1 { font-size: var(--rn-size-5xl); }
h2 { font-size: var(--rn-size-4xl); }
h3 { font-size: var(--rn-size-3xl); }
h4 { font-size: var(--rn-size-2xl); }
h5 { font-size: var(--rn-size-xl); }
h6 { font-size: var(--rn-size-lg); }
p  { margin: 0 0 var(--rn-space-4) 0; color: var(--rn-text-muted); }
a  { color: var(--rn-primary); text-decoration: none; transition: color var(--rn-t-fast); }
a:hover { color: var(--rn-primary-hover); }
img, svg, video { display: block; max-width: 100%; }

/* ---- Containers ---- */
.rn-container        { width: 100%; max-width: var(--rn-container); margin: 0 auto; padding: 0 var(--rn-space-5); }
.rn-container-tight  { width: 100%; max-width: var(--rn-container-tight); margin: 0 auto; padding: 0 var(--rn-space-5); }

/* ---- Selection + scrollbar ---- */
::selection { background: var(--rn-gold-500); color: var(--rn-bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--rn-bg); }
::-webkit-scrollbar-thumb { background: var(--rn-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--rn-bg-elev-2); }

/* ---- Responsive type clamp ---- */
@media (max-width: 768px) {
  :root {
    --rn-size-5xl: 2.5rem;
    --rn-size-4xl: 2rem;
    --rn-size-3xl: 1.625rem;
    --rn-space-9:  64px;
  }
  .rn-container, .rn-container-tight { padding: 0 var(--rn-space-4); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}