/*
 * The Signal by TradeAlgo — Design System
 * Single source of truth for all design tokens.
 * Source of truth: brand/catalog-navy.html
 */

:root {

  /* ── Navy / Dark ─────────────────────────────────────────────── */
  --navy:       #202F41;   /* primary brand — masthead, headers, deep bg */
  --navy-deep:  #16202e;   /* darker variant */
  --navy-light: #2d4461;   /* hover states */

  /* ── Neutrals ────────────────────────────────────────────────── */
  --surface:        #ECF0F4;  /* page background */
  --card-bg:        #FFFFFF;  /* card/content backgrounds */
  --mist:           #E1EBED;  /* tier bars, light accent backgrounds */
  --text-primary:   #202F41;  /* = --navy */
  --text-secondary: #5D6A74;  /* body copy */
  --text-muted:     #7d8789;  /* labels, captions */
  --border:         #DADCDE;  /* standard border */
  --border-light:   #E8E8EA;  /* subtle dividers */
  --white:          #FFFFFF;

  /* ── Accent / Signal Colors ──────────────────────────────────── */
  --green:      #16A34A;  /* positive/success — CTAs, convergence, unlocked */
  --green-dark: #15803d;
  --blue:       #1A6DDB;  /* links, data highlights */
  --red:        #D32F2F;  /* negative/alerts */
  --amber:      #EF6C00;  /* caution/pending — regime indicators */
  --gold:       #B8860B;  /* premium/elite indicators */

  /* ── Functional ──────────────────────────────────────────────── */
  --green-glow: rgba(22, 163, 74, 0.15);

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.1);

  /* ── Gray scale — aliased to brand palette ───────────────────── *
   * These bridge the Tailwind-style --gray-* tokens used in the   *
   * landing pages to their nearest brand-palette equivalents.      *
   * ─────────────────────────────────────────────────────────────── */
  --gray-50:  #ECF0F4;   /* → --surface */
  --gray-100: #E1EBED;   /* → --mist */
  --gray-200: #DADCDE;   /* → --border */
  --gray-300: #C8CCCF;   /* mid-tone stroke / inactive icons */
  --gray-400: #9ca3af;   /* placeholder / disabled (no exact brand match) */
  --gray-500: #7d8789;   /* → --text-muted */
  --gray-600: #5D6A74;   /* → --text-secondary */
  --gray-700: #3d4a56;   /* dark body text */
  --gray-800: #2d4461;   /* → --navy-light */
  --gray-900: #202F41;   /* → --navy */
}