/* ===========================================================================
   RBC TRADING — DESIGN TOKENS
   Palette carried over from the original brand kit (Elementor global colors),
   re-balanced so navy carries the page instead of the "farm green" every
   competitor commodity site defaults to. Orange stays the one CTA color —
   used nowhere else — so it never loses urgency.
   =========================================================================== */

:root {
  /* ---- Brand colors ---- */
  --navy-950: #0f1f30;   /* darkest — footer, overlays */
  --navy-900: #16293f;
  --navy-800: #1f3b5c;   /* primary brand navy (from source kit) */
  --navy-700: #2b4d76;
  --navy-600: #3c6291;
  --navy-100: #e8edf3;   /* tinted backgrounds on navy sections */

  --orange-600: #e97428; /* CTA orange (from source kit) — reserved for actions only */
  --orange-700: #c85f1b;
  --orange-100: #fdece0;

  --green-600: #7bbf6a;  /* accent / hover highlight (from source kit) */
  --green-700: #5c9b4d;

  --gold-600: #d4af37;   /* certification / trust-badge accent */

  --paper-0:  #fefdfb;   /* off-white "document" background, warmer than pure white */
  --paper-50: #f8f7f4;
  --paper-100:#f1efe9;
  --ink-900:  #1c1f24;
  --ink-700:  #3a3f47;
  --ink-500:  #6b7077;   /* body text gray (from source kit, warmed slightly) */
  --ink-300:  #b7bcc2;
  --line-200: #dfdecf;   /* hairline rule color, tuned warm to sit on --paper */

  /* ---- Semantic aliases ---- */
  --color-bg:        var(--paper-0);
  --color-surface:   #ffffff;
  --color-text:      var(--ink-900);
  --color-text-muted:var(--ink-500);
  --color-primary:   var(--navy-800);
  --color-primary-dark: var(--navy-950);
  --color-accent:    var(--orange-600);
  --color-accent-dark: var(--orange-700);
  --color-highlight: var(--green-600);
  --color-stamp:     var(--gold-600);
  --color-border:    var(--line-200);

  /* ---- Type ---- */
  --font-display: "Fjalla One", "Roboto Condensed", Impact, sans-serif;
  --font-body:    "Source Sans 3", "Roboto", -apple-system, sans-serif;
  --font-slab:    "Roboto Slab", Georgia, serif;
  --font-mono:    "IBM Plex Mono", "Roboto Mono", ui-monospace, SFMono-Regular, monospace;

  --step--1: clamp(0.79rem, 0.76rem + 0.15vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.45rem + 0.7vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.85rem + 1.2vw, 2.9rem);
  --step-4:  clamp(2.75rem, 2.3rem + 2.2vw, 4.2rem);
  --step-5:  clamp(3.4rem, 2.7rem + 3.4vw, 5.6rem);

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;
  --space-9: 9rem;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med: 320ms;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(15, 31, 48, 0.06), 0 1px 1px rgba(15, 31, 48, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 31, 48, 0.10), 0 2px 6px rgba(15, 31, 48, 0.06);
  --shadow-lg: 0 24px 48px rgba(15, 31, 48, 0.16), 0 4px 12px rgba(15, 31, 48, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
  }
}