/* =====================================================================
   BSA FUTURES - THEME  (QUICK EDITS)
   ---------------------------------------------------------------------
   This is the ONLY file you need to change colors, fonts and spacing.
   Change a value here and it changes everywhere on the site,
   including the animated chart in the hero.

   How to edit: change the value after the colon, save, refresh.
   Example:  --color-accent: #D4A846;   ->   --color-accent: #3DD6F5;
   ===================================================================== */

:root {
  /* ---------- BACKGROUNDS ---------- */
  --color-bg: #15171C;          /* main page background (dark charcoal) */
  --color-bg-deep: #101216;     /* darker strip: footer and alternate sections */
  --color-surface: #1D2027;     /* cards and panels */
  --color-surface-2: #252932;   /* card hover, chips */
  --color-border: #2E333D;      /* thin lines around cards */

  /* ---------- TEXT ---------- */
  --color-text: #ECEAE4;        /* main text (soft off-white) */
  --color-text-muted: #A3A6AD;  /* secondary text */
  --color-text-faint: #6F7480;  /* small labels, decorative text only */

  /* ---------- BRAND ACCENT (gold) ---------- */
  --color-accent: #D4A846;       /* the gold used on buttons and highlights */
  --color-accent-hover: #E4BC5F; /* gold when you hover a button */
  --color-accent-ink: #15171C;   /* text colour on top of gold */

  /* ---------- FOCUS RING (cyan) ----------
     The outline shown when someone navigates with the keyboard.
     Chart colours are in the CHART-ONLY section below. */
  --color-vpoc: #3DD6F5;

  /* ---------- CHART-ONLY COLORS (hero animation) ---------- */
  --chart-up: #6FBF8E;         /* buyers / up candles */
  --chart-down: #E07A7A;       /* sellers / down candles */
  --chart-grid: #232730;       /* faint grid lines */
  --chart-profile: #9AA0AB;    /* volume profile rows OUTSIDE the value area (light gray) */
  --chart-profile-va: #B7A6F2; /* volume profile rows INSIDE the value area (light purple) */
  --chart-vpoc: #F0524F;       /* the VPOC row, line and label (red) */
  --chart-tpo: #3DD6F5;        /* TPO letters and the TPO value area (scene 3 only) */
  --chart-tpo-out: #C3C7CF;    /* TPO rows OUTSIDE the value area (light gray) */
  --chart-level: #8C93A3;      /* level lines (VAH, VAL, range high...) */

  /* ---------- FONTS ---------- */
  --font-heading: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TEXT SIZES (they grow with the screen) ---------- */
  --text-h1: clamp(2.375rem, 1rem + 3.6vw, 4rem);  /* the big hero headline */
  --text-h2: clamp(1.75rem, 1.1rem + 2.5vw, 3rem);   /* section titles */
  --text-h3: 1.25rem;                                 /* card titles */
  --text-body: 1.0625rem;                             /* normal text */
  --text-small: 0.9375rem;
  --text-tiny: 0.75rem;                               /* labels, eyebrows */

  /* ---------- SPACING SCALE ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --section-pad: var(--space-8);   /* space above/below each section (phones) */
  --container: 1200px;             /* max width of the content */
  --gutter: 20px;                  /* side padding (phones) */
  --header-h: 64px;                /* header height (phones) */

  /* ---------- CORNERS ---------- */
  --radius-btn: 10px;
  --radius-card: 14px;
  --radius-pill: 999px;

  /* ---------- MOTION (calm and slow) ---------- */
  --dur-fast: 200ms;
  --dur-med: 400ms;
  --dur-slow: 800ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Larger screens: more breathing room */
@media (min-width: 960px) {
  :root {
    --section-pad: var(--space-10);
    --gutter: 40px;
    --header-h: 72px;
  }
}