/* ============================================================
   TradeSmartAI — Typography tokens
   One typeface — Oxanium — across display, UI, and body.
   Headlines are ALL-CAPS, heavy, tight. Body is sentence case,
   regular weight, comfortable tracking.
   ============================================================ */

:root {
  /* --- Families -------------------------------------------------- */
  --font-display: "Oxanium", "Oxanium Bold", system-ui, sans-serif;
  --font-ui: "Oxanium", system-ui, sans-serif;
  --font-body: "Oxanium", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* --- Weights --------------------------------------------------- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* --- Type scale (px @ 16 base) -------------------------------- */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 84px;
  --text-7xl: 112px;

  /* --- Line heights --------------------------------------------- */
  --leading-none: 0.95;       /* stacked all-caps headlines          */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* --- Tracking -------------------------------------------------- */
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;    /* eyebrows / labels                  */
  --tracking-widest: 0.16em;

  /* --- Semantic roles ------------------------------------------- */
  --display-family: var(--font-display);
  --display-weight: var(--weight-extrabold);
  --display-leading: var(--leading-none);
  --display-tracking: var(--tracking-normal);
  --display-transform: uppercase; /* @kind other */

  --heading-family: var(--font-display);
  --heading-weight: var(--weight-bold);
  --heading-leading: var(--leading-tight);

  --eyebrow-family: var(--font-ui);
  --eyebrow-weight: var(--weight-semibold);
  --eyebrow-tracking: var(--tracking-wider);
  --eyebrow-transform: uppercase; /* @kind other */

  --body-family: var(--font-body);
  --body-weight: var(--weight-regular);
  --body-leading: var(--leading-normal);

  --label-family: var(--font-ui);
  --label-weight: var(--weight-semibold);
  --label-tracking: var(--tracking-wide);
}