/*
  Trade Ideas design tokens (--ti-*): the one source of truth for colour,
  type, spacing and motion on the redesigned marketing pages.
  Split out of theme.css (SITE-1448) so the shared site footer can use them
  on every page: marketing/layout.php and the Learning Center layout load
  this file in <head> on every page, before theme.css and page CSS. It holds
  only custom properties, so it changes nothing by itself.
*/

:root {
  /* Surfaces */
  --ti-bg: #0B0E14;
  --ti-card: #121826;
  --ti-card-elev: #161E2E;
  --ti-border: #1E2636;
  --ti-border-soft: rgba(30, 38, 54, 0.85);

  /* Text */
  --ti-text: #F5F7FA;
  --ti-muted: #9AA3B2;
  --ti-muted-dim: #6B7385;

  /* Brand accent (amber/orange — keeps the family's amber hue, pushed
     brighter/warmer per the approved redesign direction) */
  --ti-orange: #FF8A00;
  --ti-orange-hot: #FF9F2E;
  --ti-orange-dim: rgba(255, 138, 0, 0.12);
  --ti-orange-line: rgba(255, 138, 0, 0.35);

  /* Status */
  --ti-green: #22C55E;
  --ti-green-dim: rgba(34, 197, 94, 0.12);
  --ti-red: #FF5667;
  --ti-red-dim: rgba(255, 86, 103, 0.12);

  /* Shape */
  --ti-radius-sm: 10px;
  --ti-radius: 14px;
  --ti-radius-lg: 20px;
  --ti-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  --ti-max: 1440px;

  /* Type */
  --ti-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ------------------------------------------------------------------------
     Extended tokens (SITE-1443). Extracted from the compare / best-of /
     alternatives / features page CSS so the redesign segments reuse these
     values instead of re-typing near-duplicates. Page CSS should read only
     var(--ti-*): no new hex/rgba, no raw font sizes. H1/H2 sizes stay in the
     .ti-theme h1 / h2 rules in theme.css, not here.
     ------------------------------------------------------------------------ */

  /* Surfaces */
  --ti-bg-deep: #080B11;       /* behind media (video letterbox, screenshots) */
  --ti-bg-sunken: #0D1119;     /* table header cells */
  --ti-card-hot: #1D1A17;      /* opaque orange-tinted cell (sticky TI column) */
  --ti-border-strong: #3A465C;
  --ti-shade: rgba(0, 0, 0, 0.25);
  --ti-scrim: rgba(8, 11, 17, 0.72);         /* controls over media */
  --ti-scrim-strong: rgba(8, 11, 17, 0.9);   /* text over a photo (homepage hero) */
  --ti-scrim-soft: rgba(8, 11, 17, 0.45);    /* fade-out end of a photo scrim */
  --ti-card-translucent: rgba(15, 21, 32, 0.75);
  --ti-glass-top: rgba(22, 30, 44, 0.95);    /* panel gradient, light end */
  --ti-glass-bottom: rgba(10, 14, 22, 0.96); /* panel gradient, dark end */

  /* Text tiers, brightest to dimmest:
     --ti-text > soft > subtle > --ti-muted > muted-mid > --ti-muted-dim */
  --ti-text-soft: #D7DEE8;
  --ti-text-subtle: #C5CED9;
  --ti-muted-mid: #8793A6;
  --ti-on-accent: #0B0E14;     /* text on orange fills */

  /* Orange alpha scale (--ti-orange-dim / -line above complete it) */
  --ti-orange-wash: rgba(255, 138, 0, 0.05);
  --ti-orange-glow: rgba(255, 138, 0, 0.55);

  /* Secondary accents */
  --ti-amber: #FFB25B;
  --ti-teal: #4EC9B0;
  --ti-teal-hot: #7FE0CC;
  --ti-teal-dim: rgba(78, 201, 176, 0.08);
  --ti-teal-line: rgba(78, 201, 176, 0.35);
  --ti-green-soft: #8FE3B0;    /* text on --ti-green-dim; the one "yes" green is --ti-green */
  --ti-green-line: rgba(34, 197, 94, 0.4);

  /* White overlays on dark surfaces */
  --ti-overlay-1: rgba(255, 255, 255, 0.04);
  --ti-overlay-2: rgba(255, 255, 255, 0.08);
  --ti-overlay-3: rgba(255, 255, 255, 0.12);
  --ti-overlay-4: rgba(255, 255, 255, 0.25);

  /* Shadows (--ti-shadow above sits between md and lg) */
  --ti-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.3);
  --ti-shadow-md: 0 16px 40px rgba(0, 0, 0, 0.4);
  --ti-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
  --ti-glow-orange: 0 0 28px rgba(255, 138, 0, 0.35);
  --ti-shadow-orange: 0 10px 30px rgba(255, 138, 0, 0.35);

  /* Headings: the .ti-theme h1 / h2 rules in theme.css are the only places that
     apply these to headings. --ti-fs-h2 may also be used for a tagline above
     the H1, which is styled like an H2 and never larger than the H1. */
  --ti-fs-h1: clamp(42px, 5.5vw, 58px);
  --ti-fs-h2: clamp(24px, 3vw, 34px);
  --ti-fs-h1-home: clamp(32px, 3.6vw + 12px, 62px);   /* homepage hero H1 only (index.css) */
  --ti-fs-lead-lg: clamp(18px, 1.7vw, 22px);
  --ti-fs-lead: clamp(15px, 1.4vw, 17px);

  /* Font sizes (below H2). Small sizes are intentional on the dark pages. */
  --ti-fs-2xs: 11px;   /* uppercase labels, table heads */
  --ti-fs-xs: 12px;
  --ti-fs-sm: 13px;    /* captions, fine print */
  --ti-fs-md: 14px;    /* table cells, card detail */
  --ti-fs-base: 15px;  /* card body */
  --ti-fs-lg: 16px;
  --ti-fs-xl: 17px;    /* prose */
  --ti-fs-2xl: 18px;   /* hero lede */
  --ti-fs-h3: 20px;    /* every card / section H3 */
  --ti-fs-stat: 22px;  /* stat numbers */

  /* Font weights */
  --ti-fw-medium: 500;
  --ti-fw-semibold: 600;
  --ti-fw-bold: 700;
  --ti-fw-black: 800;

  /* Line heights */
  --ti-lh-display: 1.05;
  --ti-lh-tight: 1.15;
  --ti-lh-snug: 1.4;
  --ti-lh-body: 1.55;
  --ti-lh-loose: 1.7;

  /* Letter spacing */
  --ti-track-display: -0.045em;  /* hero H1 */
  --ti-track-tight: -0.03em;     /* H1–H4 default */
  --ti-track-snug: -0.015em;     /* card titles */
  --ti-track-caps-sm: 0.04em;    /* small uppercase / pill text */
  --ti-track-caps: 0.1em;        /* uppercase labels */

  /* Radius (--ti-radius-sm / --ti-radius / --ti-radius-lg above) */
  --ti-radius-md: 12px;
  --ti-radius-pill: 999px;

  /* Layout spacing */
  --ti-gutter: 40px;
  --ti-section-y: 56px;
  --ti-gap: 14px;      /* card grids */
  --ti-prose: 820px;   /* paragraphs, lists, single-column heroes */
  --ti-media-max: 56rem; /* body images and videos (896px) */

  /* Motion */
  --ti-dur-fast: 0.15s;
  --ti-dur: 0.2s;

  /* Breakpoints can't be custom properties inside @media. Use only these
     max-width values: 1199px (two-column heroes stack below 1200px),
     900px, 768px (tablet), 560px (phone). */
}

@media (max-width: 768px) {
  :root { --ti-gutter: 20px; }
}