/* ═══════════════════════════════════════════════
   RupeeCase Design System | Direction D
   Loaded on every page via <link rel="stylesheet">
   in /public/index.html (React) and via patcher on
   static hubs.
   Refined Institutional aesthetic:
   - Warm off-white base (not clinical pure white)
   - Layered soft shadows (Stripe / Mercury style)
   - 12-16px curves
   - Subtle gradient mesh in hero areas
   - Chart-line silhouette decorative motif (no ticker noise)
   - Monospace numerics, hairline rules, real numbers
   ═══════════════════════════════════════════════ */

:root {
  /* Color tokens — light theme */
  --rcd-bg:        #FAFAF7;   /* warm off-white, kills clinical blank feel */
  --rcd-bg-alt:   #F4F3EE;
  --rcd-card:      #FFFFFF;
  --rcd-text:      #0D1F3C;
  --rcd-text-2:    #3A4150;
  --rcd-text-3:    #6B7280;
  --rcd-rule:      rgba(13,31,60,0.08);
  --rcd-rule-strong: rgba(13,31,60,0.16);
  --rcd-pos:       #047857;
  --rcd-neg:       #B91C1C;
  --rcd-accent:    #B45309;   /* amber for "live" indicators only */

  /* Layered shadow tokens — three tiers */
  --rcd-sh-1: 0 1px 2px rgba(13,31,60,0.04), 0 2px 6px rgba(13,31,60,0.04);
  --rcd-sh-2: 0 1px 3px rgba(13,31,60,0.06), 0 12px 32px -8px rgba(13,31,60,0.10);
  --rcd-sh-3: 0 2px 4px rgba(13,31,60,0.08), 0 24px 48px -12px rgba(13,31,60,0.16);

  /* Radius tokens */
  --rcd-r-sm: 8px;
  --rcd-r-md: 12px;
  --rcd-r-lg: 16px;
  --rcd-r-xl: 24px;
  --rcd-r-pill: 999px;

  /* Type scale anchors */
  --rcd-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --rcd-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Dark theme — deep ink with the same shadow logic inverted */
html.dark, [data-theme="dark"] {
  --rcd-bg:        #0A0E1A;
  --rcd-bg-alt:    #0F1420;
  --rcd-card:      #13192A;
  --rcd-text:      #E8EDF5;
  --rcd-text-2:    #B8C2D6;
  --rcd-text-3:    #7A8499;
  --rcd-rule:      rgba(232,237,245,0.08);
  --rcd-rule-strong: rgba(232,237,245,0.18);
  --rcd-pos:       #34D399;
  --rcd-neg:       #F87171;
  --rcd-accent:    #F59E0B;
  --rcd-sh-1: 0 1px 2px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.20);
  --rcd-sh-2: 0 1px 3px rgba(0,0,0,0.30), 0 12px 32px -8px rgba(0,0,0,0.40);
  --rcd-sh-3: 0 2px 4px rgba(0,0,0,0.40), 0 24px 48px -12px rgba(0,0,0,0.50);
}

/* Body background uses the warm off-white token. Generators hard-code
   #fafbfc / #060912 with class-level selectors that win on specificity,
   so we match selector specificity here to win the cascade. The point of
   Direction D is the warm bg, so this override is core to the look. */
html.light body { background: var(--rcd-bg); color: var(--rcd-text); }
html.dark body  { background: var(--rcd-bg); color: var(--rcd-text); }

/* Utility classes that components can opt into */
.rcd-card {
  background: var(--rcd-card);
  border: 1px solid var(--rcd-rule);
  border-radius: var(--rcd-r-lg);
  box-shadow: var(--rcd-sh-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.rcd-card-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--rcd-sh-3);
}
.rcd-card-md { box-shadow: var(--rcd-sh-2); }

/* Buttons with depth */
.rcd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--rcd-r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
}
.rcd-btn-primary {
  background: var(--rcd-text);
  color: var(--rcd-bg);
  box-shadow: var(--rcd-sh-2);
  border: none;
}
.rcd-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--rcd-sh-3);
}
.rcd-btn-secondary {
  background: var(--rcd-card);
  color: var(--rcd-text);
  border: 1px solid var(--rcd-rule);
  box-shadow: var(--rcd-sh-1);
}
.rcd-btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: var(--rcd-sh-2);
}

/* Eyebrow pill — replaces flat eyebrow text */
.rcd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  background: var(--rcd-card);
  border: 1px solid var(--rcd-rule);
  border-radius: var(--rcd-r-pill);
  font-family: var(--rcd-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rcd-text-2);
  box-shadow: var(--rcd-sh-1);
}

/* Tabular numerics utility */
.rcd-tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Soft hero gradient mesh — apply to hero containers */
.rcd-hero-mesh {
  position: relative;
  overflow: hidden;
}
.rcd-hero-mesh::before {
  content: '';
  position: absolute;
  inset: -200px -100px auto auto;
  width: 780px;
  height: 780px;
  background:
    radial-gradient(ellipse at center, rgba(13,31,60,0.06), transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(180,140,60,0.05), transparent 55%);
  pointer-events: none;
  z-index: 0;
  filter: blur(40px);
}
html.dark .rcd-hero-mesh::before, [data-theme="dark"] .rcd-hero-mesh::before {
  background:
    radial-gradient(ellipse at center, rgba(96,165,250,0.10), transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(245,158,11,0.06), transparent 55%);
}
.rcd-hero-mesh > * { position: relative; z-index: 1; }

/* Subtle chart-line silhouette — drop into footers / hero bottoms */
.rcd-chart-silhouette {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  pointer-events: none;
  opacity: 0.04;
  z-index: 0;
}
html.dark .rcd-chart-silhouette, [data-theme="dark"] .rcd-chart-silhouette {
  opacity: 0.06;
}

/* CAGR pill — the warm green badge on strategy cards */
.rcd-cagr-pill {
  font-family: var(--rcd-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--rcd-pos);
  background: rgba(4,120,87,0.10);
  padding: 3px 10px;
  border-radius: var(--rcd-r-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
html.dark .rcd-cagr-pill, [data-theme="dark"] .rcd-cagr-pill {
  background: rgba(52,211,153,0.10);
}

/* Live status pulse */
.rcd-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rcd-pos);
  box-shadow: 0 0 0 3px rgba(4,120,87,0.18);
  animation: rcdPulse 2s ease-in-out infinite;
}
html.dark .rcd-live-dot, [data-theme="dark"] .rcd-live-dot {
  box-shadow: 0 0 0 3px rgba(52,211,153,0.18);
}
@keyframes rcdPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .rcd-card, .rcd-btn, .rcd-card-lift { transition: none; }
  .rcd-live-dot { animation: none; }
}