/* variables.css — Design System v1
   RetroVision (site-wide) + ChartRoom (charts section)
*/

/* Base scales */
:root {
  /* Typography */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-xxl: 2.4rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing scale */
  --space-2: 0.125rem;
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;

  /* Radii */
  --radius-sm: 0.35rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.25);

  /* === RetroVision core (global) === */
  --rv-bg: #061428;          /* deep navy background */
  --rv-bg-elevated: #0b1c36; /* panels/cards */
  --rv-bg-elevated-soft: #122447;

  --rv-paper: #f5e2b5;       /* cream “ticket” */
  --rv-red: #e14532;         /* retro red accent */
  --rv-yellow: #ffd944;      /* MTV-ish yellow */
  --rv-border-soft: rgba(255, 255, 255, 0.08);

  --rv-text-main: #f7f9ff;
  --rv-text-muted: #a8b4d4;
  --rv-text-strong: #ffffff;

  --rv-pill-bg: rgba(5, 15, 35, 0.9);
  --rv-pill-border: rgba(255, 255, 255, 0.1);

  /* Interactive */
  --rv-btn-primary-bg: #ffd944;
  --rv-btn-primary-fg: #111320;
  --rv-btn-primary-bg-hover: #ffe46a;

  --rv-btn-ghost-bg: transparent;
  --rv-btn-ghost-fg: #f7f9ff;
  --rv-btn-ghost-border: rgba(255, 255, 255, 0.25);
  --rv-btn-ghost-bg-hover: rgba(255, 255, 255, 0.08);

  /* === ChartRoom subset (for charts pages) === */
  --cr-bg: #050c17;
  --cr-surface: #101c33;
  --cr-surface-soft: #151f39;

  --cr-accent-blue: #4ab3f4;
  --cr-accent-gold: #f2c14f;
  --cr-accent-green: #32c28b;

  --cr-text-main: #f6f8ff;
  --cr-text-muted: #9aaccc;
  --cr-grid-line: rgba(255, 255, 255, 0.08);
}

/* Optional modifier for ChartRoom-themed pages */
.theme-chartroom {
  --rv-bg: var(--cr-bg);
  --rv-bg-elevated: var(--cr-surface);
  --rv-bg-elevated-soft: var(--cr-surface-soft);
  --rv-text-main: var(--cr-text-main);
  --rv-text-muted: var(--cr-text-muted);
  --rv-btn-primary-bg: var(--cr-accent-blue);
  --rv-btn-primary-bg-hover: #63c1fb;
}