/* ==========================================================================
   Design tokens — The Good Framework
   Palette, type and radius values are lifted verbatim from the live
   thegoodframework.com Webflow stylesheet (verified against the computed
   :root variables, and against ai-news-feed/WEBFLOW_DESIGN_SPEC.md).

   THIS IS THE ONLY FILE THAT MAY CONTAIN RAW HEX / RGB LITERALS.
   Everything else references var(--…).
   ========================================================================== */

@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand: typography ---------- */
  --font-primary: 'General Sans', Arial, sans-serif;
  /* TGF ships General Sans at 400 and 500 only. Never use 600/700 —
     the browser would synthesise a faux-bold and break the brand. */
  --fw-regular: 400;
  --fw-medium: 500;

  /* ---------- Brand: neutrals ---------- */
  --black: #1d1c1a;
  --dark-gray: #292825;
  --mid-gray-1: #cccabf;
  --mid-gray-2: #474641;
  --light-gray: #f0eee6; /* warm cream — TGF's signature surface */
  --white: #ffffff;

  /* ---------- Brand: cerulean blue ramp ---------- */
  --blue-50: #f0f5fe;
  --blue-100: #dde8fc;
  --blue-200: #c3d7fa;
  --blue-300: #99bef7;
  --blue-400: #699cf1;
  --blue-500: #4679eb;
  --blue-600: #2955de;
  --blue-700: #2847cd;
  --blue-800: #273ca6;
  --blue-900: #243684;
  --blue-950: #1b2350;
  --blue-500-rgb: 70, 121, 235; /* gauge gradient cool stop */

  /* Named aliases matching the Webflow variable names */
  --blue: var(--blue-600);
  --blue-lighter: var(--blue-500);
  --blue-lightest: var(--blue-50);
  --blue-darker: var(--blue-700);
  --blue-darkest: var(--blue-950);

  /* ---------- Brand: secondary ---------- */
  --yellow: #f8d47a;
  --yellow-rgb: 248, 212, 122;
  --secondary-blue: #0073e6;

  --overlay-backdrop: rgba(0, 0, 0, 0.4); /* mobile nav scrim */

  /* ---------- Brand: geometry ---------- */
  --radius: 0.5rem; /* cards, buttons, inputs, badges — everywhere */
  --gap-sm: 8px;
  --gap-button: 16px;
  --gap-md: 24px;

  /* ---------- Brand: type scale (fluid 20rem → 90rem) ---------- */
  --fluid-min: 20;
  --fluid-max: 90;
  --h1-size: clamp(2.8rem, 2.03rem + 3.86vw, 5.5rem);
  --h2-size: clamp(2rem, 1.49rem + 2.57vw, 3.8rem);
  --h3-size: clamp(1.5rem, 1.27rem + 1.14vw, 2.3rem);
  --h4-size: clamp(1.3rem, 1.24rem + 0.29vw, 1.5rem);
  --h5-size: clamp(1.1rem, 1.07rem + 0.14vw, 1.2rem);
  --h6-size: clamp(0.9rem, 0.87rem + 0.14vw, 1rem);
  --body-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --body-sm-size: clamp(0.8rem, 0.77rem + 0.14vw, 0.9rem);
  --body-lg-size: clamp(1.1rem, 1.06rem + 0.21vw, 1.25rem);
  --eyebrow-size: clamp(0.7rem, 0.67rem + 0.14vw, 0.8rem);

  --body-line-height: 1.6;
  --eyebrow-letter-spacing: 0.1em;
  --heading-letter-spacing-tight: -0.02em;

  /* ==========================================================================
     DASHBOARD EXTENSION TIER
     A deliberate divergence from TGF's editorial scale. TGF is built for
     long-form reading — its H1 renders at 82px and section padding runs
     3–6rem. This app puts 55 ticker tiles inside one heatmap segment, so the
     brand scale would destroy the information density.
     These tokens sit BELOW --body-sm-size and are derived from the same
     palette, so the result reads as the same design system at higher density.
     ========================================================================== */
  --ds-micro: 0.7rem;    /* heatmap tile pct, table meta */
  --ds-small: 0.78rem;   /* ticker names, badges, source lines */
  --ds-body: 0.875rem;   /* table cells, card body */
  --ds-lead: 1rem;       /* card titles, panel headings */

  --ds-pad-section: 1.25rem; /* replaces the fluid 3–6rem inside the app shell */
  --ds-pad-card: 0.875rem;
  --ds-pad-tile: 0.5rem;

  --ds-topbar-h: 60px;
  --ds-sidebar-w: 244px;
  --ds-max-w: 1680px;

  /* Directional colours. NOTE: green = UP, red = DOWN (Western convention).
     The Chinese-market original inverts this; do not copy that. */
  --up: #1f8f5f;
  --up-rgb: 31, 143, 95;
  --down: #c2483f;
  --down-rgb: 194, 72, 63;
  --flat: var(--mid-gray-1);

  /* Heat ramp geometry, ported from the original: the alpha floor, the
     6%-move saturation cap, and the contrast flip point. */
  --heat-alpha-floor: 0.16;
  --heat-alpha-span: 0.78;
  --heat-pct-cap: 6;
  --heat-invert-at: 0.55;

  --transition: 150ms ease;
}

/* ==========================================================================
   Semantic aliases — light theme (default)
   Mirrors TGF's own --primary--* indirection so a single switch flips modes.
   ========================================================================== */
:root,
:root[data-theme='light'] {
  color-scheme: light;

  --bg: var(--white);
  --bg-sunken: var(--light-gray);
  --bg-raised: var(--white);
  --bg-inset: var(--light-gray);
  --chip-bg: var(--light-gray);

  --text: var(--black);
  --text-secondary: var(--dark-gray);
  --text-muted: #6b6a63;

  --border: var(--mid-gray-1);
  --border-strong: #b3b1a5;
  --border-accent: var(--blue-100);

  --accent: var(--blue);
  --accent-hover: var(--blue-lighter);
  --accent-active: var(--blue-darker);
  --accent-bg: var(--blue-50);
  --accent-text-on-bg: var(--blue-950);
  --yellow-text: #7a5200; /* WCAG-contrast text for yellow-tinted badges on a light background */

  --tile-text-inverted: var(--white);
  --focus-ring: rgba(41, 85, 222, 0.35);
  --hover-shadow: 0 2px 12px rgba(41, 85, 222, 0.08);
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: var(--black);
  --bg-sunken: #161514;
  --bg-raised: #232220;
  --bg-inset: var(--dark-gray);
  --chip-bg: var(--dark-gray);

  --text: #f5f3ec;
  --text-secondary: #c9c7bd;
  --text-muted: #918f86;

  --border: var(--mid-gray-2);
  --border-strong: #5c5b55;
  --border-accent: var(--blue-800);

  --accent: var(--blue-400);
  --accent-hover: var(--blue-300);
  --accent-active: var(--blue-500);
  --accent-bg: rgba(41, 85, 222, 0.16);
  --accent-text-on-bg: var(--blue-200);

  --up: #3fb37c;
  --up-rgb: 63, 179, 124;
  --down: #e06a5f;
  --down-rgb: 224, 106, 95;
  --flat: var(--mid-gray-2);
  --yellow-text: var(--yellow);

  --tile-text-inverted: var(--white);
  --focus-ring: rgba(105, 156, 241, 0.4);
  --hover-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* data-theme="auto" defers to the OS. Declared after both explicit themes so
   it only wins when the user has not chosen a mode. */
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] {
    color-scheme: dark;

    --bg: var(--black);
    --bg-sunken: #161514;
    --bg-raised: #232220;
    --bg-inset: var(--dark-gray);
    --chip-bg: var(--dark-gray);

    --text: #f5f3ec;
    --text-secondary: #c9c7bd;
    --text-muted: #918f86;

    --border: var(--mid-gray-2);
    --border-strong: #5c5b55;
    --border-accent: var(--blue-800);

    --accent: var(--blue-400);
    --accent-hover: var(--blue-300);
    --accent-active: var(--blue-500);
    --accent-bg: rgba(41, 85, 222, 0.16);
    --accent-text-on-bg: var(--blue-200);

    --up: #3fb37c;
    --up-rgb: 63, 179, 124;
    --down: #e06a5f;
    --down-rgb: 224, 106, 95;
    --flat: var(--mid-gray-2);
    --yellow-text: var(--yellow);

    --focus-ring: rgba(105, 156, 241, 0.4);
    --hover-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  }
}