/**
 * Trade Ideas — Brand Tokens
 * Version: 1.2 | 2026
 *
 * Single source of truth for all brand design tokens.
 * Import this file at the root of your stylesheet.
 * Reference: BRAND_GUIDELINES.md
 *
 * Usage:
 *   color: var(--color-blue-500);
 *   font-family: var(--font-base);
 *   padding: var(--space-4);
 */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

:root {

  /* ─── Typography ─────────────────────────────────────────── */

  --font-base: 'Figtree', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Heading scale */
  --text-display:  52px;   /* 3.25rem · SemiBold 600 · line-height 1.15 · tracking -0.02em */
  --text-h1:       42px;   /* 2.625rem · SemiBold 600 · line-height 1.20 · tracking -0.015em */
  --text-h2:       30px;   /* 1.875rem · SemiBold 600 · line-height 1.25 · tracking -0.01em */
  --text-h3:       22px;   /* SemiBold 600 · line-height 1.30 · tracking 0 */
  --text-h4:       18px;   /* Medium 500   · line-height 1.35 · tracking 0 */

  /* Body scale */
  --text-lead:     18px;   /* Regular 400  · line-height 1.75 */
  --text-body:     16px;   /* Regular 400  · line-height 1.70 */
  --text-small:    16px;   /* Minimum readable size across marketing */
  --text-xs:       14px;   /* Captions / fine print only */

  /* UI label scale */
  --text-eyebrow:  12px;   /* Medium 500   · uppercase · tracking 0.08em */
  --text-nav:      13px;   /* Medium 500   · no transform */
  --text-button:   16px;   /* Medium 500   · no transform */
  --text-badge:    12px;   /* Medium 500   · uppercase · tracking 0.06em */
  --text-stat-lbl: 11px;   /* Medium 500   · uppercase · tracking 0.06em */

  /* Font weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Line heights */
  --leading-tight:    1.15;
  --leading-snug:     1.25;
  --leading-normal:   1.50;
  --leading-relaxed:  1.70;
  --leading-loose:    1.75;

  /* Letter spacing */
  /* Runway-like tighter headline tracking (apply to Display/H1/H2 only). */
  --tracking-tight:   -0.03em;  /* Display */
  --tracking-snug:    -0.02em;  /* H1 */
  --tracking-normal:  0;
  --tracking-wide:    0.06em;   /* Badges, stat labels */
  --tracking-wider:   0.08em;   /* Eyebrow labels */


  /* ─── Colors — Primary Blue ───────────────────────────────── */

  --color-blue-100: #D6EBF5;   /* Backgrounds, hover states, icon containers */
  --color-blue-300: #8DC4DF;   /* Borders, dividers */
  --color-blue-500: #066699;   /* ★ Primary buttons, links, headers */
  --color-blue-700: #044D73;   /* Hover on primary blue */
  --color-blue-900: #02344F;   /* Dark surfaces, nav background */


  /* ─── Colors — Secondary Amber ────────────────────────────── */

  --color-amber-100: #FEF0D9;  /* Alert backgrounds, icon containers */
  --color-amber-300: #F7C57A;  /* Highlights, badges */
  --color-amber-500: #F19429;  /* ★ CTAs, accents — use sparingly */
  --color-amber-700: #C4721A;  /* Hover on amber, icon strokes on amber */
  --color-amber-900: #7A420A;  /* Text on amber tint backgrounds */


  /* ─── Colors — Neutral Gray ───────────────────────────────── */

  --color-gray-50:  #F4F6F8;   /* Page backgrounds */
  --color-gray-100: #E2E6EA;   /* Card backgrounds, panels, icon containers */
  --color-gray-300: #B0B8C1;   /* Borders, input strokes */
  --color-gray-500: #6C757D;   /* Secondary text, captions, gray icon strokes */
  --color-gray-800: #343A40;   /* Primary body text */
  --color-gray-950: #111417;   /* Headings — never use pure #000000 */


  /* ─── Colors — Functional Status ─────────────────────────── */

  --color-success-light: #EAF3EE;  /* Gain backgrounds */
  --color-success:       #4A9470;  /* Gains, positive signals */
  --color-success-dark:  #2D6B4F;  /* Text on success light */

  --color-danger-light:  #FAECEC;  /* Loss backgrounds */
  --color-danger:        #B85555;  /* Losses, errors, alerts */
  --color-danger-dark:   #7A3333;  /* Text on danger light */

  /* Warning reuses Amber — keeps system tight */
  --color-warning-light: var(--color-amber-100);
  --color-warning:       var(--color-amber-500);

  /* Info reuses Blue */
  --color-info-light:    var(--color-blue-100);
  --color-info:          var(--color-blue-500);


  /* ─── Colors — Semantic Roles ─────────────────────────────── */

  --color-text-heading:    var(--color-gray-950);  /* All headings */
  --color-text-body:       var(--color-gray-800);  /* Primary body text */
  --color-text-secondary:  var(--color-gray-500);  /* Secondary/caption text */
  --color-text-eyebrow:    var(--color-blue-500);  /* Eyebrow labels */
  --color-text-on-dark:    #ffffff;                /* Text on dark surfaces */

  --color-bg-page:         var(--color-gray-50);   /* Page background */
  --color-bg-card:         var(--color-gray-100);  /* Card / panel background */
  --color-bg-nav:          var(--color-blue-900);  /* Navigation background */

  --color-border:          var(--color-gray-100);  /* Default borders */
  --color-border-strong:   var(--color-gray-300);  /* Emphasized borders */

  --color-action-primary:  var(--color-blue-500);  /* Primary action */
  --color-action-hover:    var(--color-blue-700);  /* Primary action hover */
  --color-action-cta:      var(--color-amber-500); /* CTA / accent */
  --color-action-cta-hover:var(--color-amber-700); /* CTA hover */


  /* ─── Iconography ─────────────────────────────────────────── */

  /* Feature card icons (44px container) */
  --icon-feature-size:       20px;
  --icon-feature-container:  44px;
  --icon-feature-radius:     10px;

  /* Inline / nav icons (32px container) */
  --icon-inline-size:        16px;
  --icon-inline-container:   32px;
  --icon-inline-radius:      8px;

  /* Icon colors — Blue (core features) */
  --icon-blue-bg:     var(--color-blue-100);   /* #D6EBF5 */
  --icon-blue-stroke: var(--color-blue-500);   /* #066699 */

  /* Icon colors — Amber (key differentiators — use sparingly) */
  --icon-amber-bg:     var(--color-amber-100); /* #FEF0D9 */
  --icon-amber-stroke: var(--color-amber-700); /* #C4721A */

  /* Icon colors — Gray (utility / neutral) */
  --icon-gray-bg:     var(--color-gray-100);   /* #E2E6EA */
  --icon-gray-stroke: var(--color-gray-500);   /* #6C757D */


  /* ─── Spacing ─────────────────────────────────────────────── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;


  /* ─── Border Radius ───────────────────────────────────────── */

  --radius-sm:           4px;   /* Badges, tags, pills */
  --radius-md:           8px;   /* Buttons, inputs, inline icon containers */
  --radius-lg:           12px;  /* Cards, panels */
  --radius-xl:           16px;  /* Large cards, modals */


  /* ─── Layout ──────────────────────────────────────────────── */

  --max-width-content:   1200px;
  --max-width-text:      680px;  /* Body copy columns */

  --section-padding-y-mobile:  var(--space-12);  /* 48px */
  --section-padding-y-desktop: var(--space-16);  /* 64px */


  /* ─── Transitions ─────────────────────────────────────────── */

  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;


  /* ─── Shadows ─────────────────────────────────────────────── */

  --shadow-sm:   0 1px 3px rgba(2, 52, 79, 0.06);
  --shadow-md:   0 4px 12px rgba(2, 52, 79, 0.08);
  --shadow-lg:   0 8px 24px rgba(2, 52, 79, 0.10);

}


/* ─── Base Styles ─────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  /* Force Jakarta Sans on token-based pages (legacy sheets set Poppins on elements). */
  font-family: var(--font-base) !important;
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  /* Runway-like tracking for 16px body copy */
  letter-spacing: -0.16px !important;
  color: var(--color-text-body);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base) !important;
  font-weight: var(--weight-semibold);
  color: var(--color-text-heading);
  margin: 0;
}

h1 {
  font-size: 28px;
  line-height: var(--leading-tight);
  /* Runway-like tracking */
  letter-spacing: -1.44px !important;
}

@media (min-width: 768px) {
  h1 {
    font-size: var(--text-h1);
  }
}

h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  /* Runway-like tracking */
  letter-spacing: -1.12px !important;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.30;
  /* Runway-like tracking */
  letter-spacing: -0.2px !important;
}

h4 {
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

p {
  margin: 0;
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  font-family: var(--font-base) !important;
}

a {
  font-family: var(--font-base) !important;
  color: var(--color-blue-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-blue-700);
}


/* ─── Utility Classes ──────────────────────────────────────── */

.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-eyebrow);
}

.text-display {
  font-size: 32px;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-heading);
}

@media (min-width: 768px) {
  .text-display {
    font-size: var(--text-display);
  }
}

.text-lead {
  font-size: var(--text-lead);
  font-weight: var(--weight-regular);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

.text-small {
  font-size: var(--text-small);
  line-height: 1.60;
  color: var(--color-text-secondary);
}

/* Extra-small helper text (use sparingly) */
.text-xs {
  font-size: var(--text-xs);
  line-height: 1.60;
  color: var(--color-text-secondary);
}

/* Inline emphasis spans — explicit font beats global * { font-family } from legacy sheets */
.text-span-blue {
  font-family: var(--font-base);
  color: var(--color-blue-500);
}

.text-span-orange {
  font-family: var(--font-base);
  color: var(--color-amber-700);
}

/* Icon containers */
.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-container--feature {
  width: var(--icon-feature-container);
  height: var(--icon-feature-container);
  border-radius: var(--icon-feature-radius);
}

.icon-container--inline {
  width: var(--icon-inline-container);
  height: var(--icon-inline-container);
  border-radius: var(--icon-inline-radius);
}

.icon-container--blue  { background-color: var(--icon-blue-bg); }
.icon-container--amber { background-color: var(--icon-amber-bg); }
.icon-container--gray  { background-color: var(--icon-gray-bg); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-badge);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.badge--blue   { background: var(--color-blue-100);    color: var(--color-blue-700); }
.badge--amber  { background: var(--color-amber-100);   color: var(--color-amber-900); }
.badge--gray   { background: var(--color-gray-100);    color: var(--color-gray-800); }
.badge--success { background: var(--color-success-light); color: var(--color-success-dark); }
.badge--danger { background: var(--color-danger-light); color: var(--color-danger-dark); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-base);
  font-size: var(--text-button);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: 10px 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-action-primary);
  color: #ffffff;
  border-color: var(--color-action-primary);
}

.btn--primary:hover {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
  color: #ffffff;
}

.btn--cta {
  background: var(--color-action-cta);
  color: #ffffff;
  border-color: var(--color-action-cta);
}

.btn--cta:hover {
  background: var(--color-action-cta-hover);
  border-color: var(--color-action-cta-hover);
  color: #ffffff;
}

.btn--outline {
  background: transparent;
  color: var(--color-blue-500);
  border-color: var(--color-blue-500);
}

.btn--outline:hover {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
  border-color: var(--color-blue-700);
}