/* Quantix Trading v3: design tokens.
   Warm espresso at the top of every page, cross-fading to white and cream as you scroll.
   A light editorial serif for headlines, a quiet grotesk for everything else.
   One accent, lavender, used only as the bright stroke of figures on dark ground. */
:root {
  color-scheme: dark;

  /* Palette */
  --espresso: #23120B;
  --espresso-2: #2C1810;
  --mahogany: #371506;
  --ash: #372F2C;
  --cream: #FCF9F6;
  --paper: #FCF7F4;
  --white: #FFFFFF;
  --taupe: #A39893;
  --sand: #DBCCC5;
  --blush: #F2E5DF;
  --peach: #FFF5F0;
  --peach-2: #FFE8DC;
  --lavender: #CBADFF;

  /* Theme slots (dark by default; body[data-theme="light"] swaps them) */
  --bg: var(--espresso);
  --fg: var(--paper);
  --fg-2: rgba(252, 247, 244, .74);
  --fg-3: var(--taupe);
  --line: rgba(252, 247, 244, .14);
  --card: rgba(253, 250, 248, .06);

  /* Hairline figures on dark ground */
  --hairline-plate: var(--espresso);
  --hairline-hi: var(--lavender);
  --hairline-edge: #8C7A72;
  --hairline-mid: #5A4840;
  --hairline-lo: #3D2C25;
  --hairline-stroke: 1;

  /* Families */
  --f-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-sans: 'Funnel Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Fluid type (mobile → desktop between 480px and 1280px) */
  --fs-80: clamp(3.125rem, 2rem + 3.75vw, 5rem);
  --fs-72: clamp(3rem, 2.1rem + 3vw, 4.5rem);
  --fs-60: clamp(2.75rem, 2.15rem + 2vw, 3.75rem);
  --fs-56: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  --fs-40: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  --fs-32: clamp(1.625rem, 1.475rem + .5vw, 2rem);
  --fs-26: 1.625rem;
  --fs-22: 1.375rem;
  --fs-body-l: 1.125rem;
  --fs-body: 1rem;
  --fs-small: .9375rem;
  --fs-eyebrow: .875rem;

  /* Space */
  --container: 1280px;
  --container-wide: 1504px;
  --pad: clamp(16px, 2.5vw, 24px);
  --section: clamp(60px, 11vw, 176px);
  --gap: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --header-h: 86px;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: 300ms;
}

body[data-theme="light"] {
  color-scheme: light;
  --bg: var(--white);
  --fg: var(--mahogany);
  --fg-2: rgba(55, 47, 44, .8);
  --fg-3: var(--taupe);
  --line: rgba(163, 152, 147, .3);
  --card: var(--cream);
}

/* Figures on light ground (cream cards, white sections) */
.tone-light {
  --hairline-plate: var(--cream);
  --hairline-hi: var(--mahogany);
  --hairline-edge: #85766F;
  --hairline-mid: #BFAFA7;
  --hairline-lo: #E2D6CF;
}
/* Inset dark panels keep dark figures whatever the page theme */
.tone-dark {
  --hairline-plate: var(--espresso);
  --hairline-hi: var(--lavender);
  --hairline-edge: #8C7A72;
  --hairline-mid: #5A4840;
  --hairline-lo: #3D2C25;
}