/* DirectTrade design tokens for the web — the values the site uses from the design project's
   tokens/*.css (colours, type scale, spacing, radius, elevation, motion), the same values as
   DSColor, DSFont and DSMetrics in the apps. Fonts are the platform's own, as in the apps, so
   the site loads nothing from anywhere else. A token the pages do not use is not carried. */

:root {
  color-scheme: light dark;

  /* ---- palette ---- */
  --dt-navy-950: #05070F; --dt-navy-900: #0A0E1A; --dt-navy-800: #161E33;
  --dt-slate-500: #5E6C8C; --dt-slate-450: #66738E; --dt-slate-400: #8290AE; --dt-slate-300: #AAB6CE;
  --dt-paper-100: #FFFFFF; --dt-paper-200: #F7F9FC; --dt-paper-400: #E3E8F1;
  --dt-azure-600: #1747D6; --dt-azure-500: #2A62FF; --dt-azure-400: #5C88FF;

  /* ---- semantic: light ---- */
  --surface-app: var(--dt-paper-200);
  --surface-card: var(--dt-paper-100);
  --border-subtle: var(--dt-paper-400);
  --border-focus: var(--dt-azure-500);
  --text-primary: var(--dt-navy-900);
  --text-secondary: var(--dt-slate-500);
  --text-tertiary: var(--dt-slate-450);
  --text-brand: var(--dt-azure-600);
  --accent-default: var(--dt-azure-500);
  --accent-hover: var(--dt-azure-600);
  --accent-on: #FFFFFF;
  --shadow-card: 0 1px 2px rgba(10, 14, 26, .04), 0 6px 16px -8px rgba(10, 14, 26, .10);
  --shadow-accent: 0 6px 18px -8px rgba(42, 98, 255, .55);

  /* ---- type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;
  --fs-display-1: 40px; --lh-display-1: 44px;
  --fs-display-2: 32px; --lh-display-2: 36px;
  --fs-title-1: 24px; --lh-title-1: 30px;
  --fs-title-2: 20px; --lh-title-2: 26px;
  --fs-title-3: 17px; --lh-title-3: 22px;
  --fs-body: 15px; --lh-body: 22px;
  --fs-callout: 14px; --lh-callout: 20px;
  --fs-caption: 13px; --lh-caption: 18px;
  --fs-micro: 11px; --lh-micro: 14px;
  --ls-display: -0.02em; --ls-title: -0.01em; --ls-caps: 0.08em;

  /* ---- spacing ---- */
  --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 20px; --sp-7: 24px;
  --sp-8: 32px; --sp-9: 40px; --sp-11: 64px;
  --gutter-screen: 16px;
  --gap-list: 12px;
  --gap-inline: 8px;

  /* ---- radius, border ---- */
  --r-xs: 6px; --r-md: 14px; --r-lg: 18px;
  --r-card: var(--r-lg); --r-control: var(--r-md);
  --bw-hairline: 1px; --bw-focus: 2px;

  /* ---- motion ---- */
  --dur-fast: 140ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --press-scale: .97;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-app: var(--dt-navy-950);
    --surface-card: var(--dt-navy-900);
    --border-subtle: var(--dt-navy-800);
    --border-focus: var(--dt-azure-400);
    --text-primary: #F2F5FB;
    --text-secondary: var(--dt-slate-300);
    --text-tertiary: var(--dt-slate-400);
    --text-brand: var(--dt-azure-400);
    --accent-hover: var(--dt-azure-400);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 20px -10px rgba(0, 0, 0, .6);
    --shadow-accent: 0 6px 20px -8px rgba(42, 98, 255, .7);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --press-scale: 1; }
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-app);
  color: var(--text-primary);
  font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
:focus-visible { outline: var(--bw-focus) solid var(--border-focus); outline-offset: 2px; border-radius: var(--r-xs); } /* the focus ring sits 2px off the element */
img { max-width: 100%; display: block; }
h1, h2, h3, p, ol, ul { margin: 0; }

/* ---- type steps ---- */
.dt-caption { font: var(--fw-regular) var(--fs-caption) / var(--lh-caption) var(--font-sans); color: var(--text-secondary); }
.dt-overline {
  font: var(--fw-semibold) var(--fs-micro) / var(--lh-micro) var(--font-sans);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---- layout: one centred column ---- */
/* 680px is the column's own measure: about 75 characters of body text per line. */
.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--gutter-screen) var(--sp-11);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page > main { flex: 1; }
/* 600px is the one breakpoint: above it the column takes the 24px gutter and the cards sit in two columns. */
@media (min-width: 600px) {
  .page { padding-left: var(--sp-7); padding-right: var(--sp-7); }
}

/* ---- header: mark + wordmark ---- */
.site-header {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-height: var(--sp-11);
  padding: var(--sp-5) 0;
}
.site-header a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--gap-inline); }
.site-header img { width: 40px; height: 40px; } /* header mark: the tile at 40px */

/* The wordmark is set in type, never an image: "Trade" carries the accent. Its −0.03em is the
   wordmark's own tracking (design project, brand-wordmark), tighter than the display step. */
.wordmark { font-weight: var(--fw-bold); letter-spacing: -0.03em; color: var(--text-primary); white-space: nowrap; }
.wordmark b { font-weight: inherit; color: var(--accent-default); }
.site-header .wordmark { font-size: var(--fs-title-2); line-height: var(--lh-title-2); }

/* ---- hero ---- */
.hero { padding: var(--sp-9) 0 var(--sp-8); }
.hero img { width: 96px; height: 96px; margin-bottom: var(--sp-6); } /* hero mark: the tile at 96px */
.hero .wordmark { display: block; font-size: var(--fs-title-1); line-height: var(--lh-title-1); margin-bottom: var(--sp-3); }
.hero h1 { font: var(--fw-bold) var(--fs-display-2) / var(--lh-display-2) var(--font-sans); letter-spacing: var(--ls-display); }
.hero p { margin-top: var(--sp-4); font: var(--fw-regular) var(--fs-title-3) / var(--lh-title-3) var(--font-sans); color: var(--text-secondary); max-width: 34em; } /* the subline's own measure */
@media (min-width: 600px) {
  .hero { padding-top: var(--sp-11); }
  .hero h1 { font-size: var(--fs-display-1); line-height: var(--lh-display-1); }
  .hero p { font-size: var(--fs-title-2); line-height: var(--lh-title-2); }
}

/* ---- cards ---- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-list);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 600px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  background: var(--surface-card);
  border: var(--bw-hairline) solid var(--border-subtle);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
}
.card .dt-overline { display: block; margin-bottom: var(--sp-3); }
.card h2 { font: var(--fw-semibold) var(--fs-title-3) / var(--lh-title-3) var(--font-sans); margin-bottom: var(--sp-2); }
.card p { color: var(--text-secondary); }

/* ---- buttons: the design's Button, lg size ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  height: 52px; /* Button lg: 52px tall, 22px side padding */
  padding: 0 22px;
  border-radius: var(--r-control);
  font: var(--fw-semibold) var(--fs-body) / var(--lh-body) var(--font-sans);
  text-decoration: none;
  border: var(--bw-hairline) solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(var(--press-scale)); filter: brightness(.94); }
.btn-primary { background: var(--accent-default); color: var(--accent-on); box-shadow: var(--shadow-accent); }
.btn-primary:hover { color: var(--accent-on); }

/* ---- documents: support, terms, privacy ---- */
.doc { padding-top: var(--sp-8); }
.doc > h1 { font: var(--fw-semibold) var(--fs-title-1) / var(--lh-title-1) var(--font-sans); letter-spacing: var(--ls-title); }
.doc > h1 + p { margin-top: var(--sp-3); }
.doc h2 { font: var(--fw-semibold) var(--fs-title-2) / var(--lh-title-2) var(--font-sans); letter-spacing: var(--ls-title); margin-top: var(--sp-8); }
.doc h3 { font: var(--fw-semibold) var(--fs-title-3) / var(--lh-title-3) var(--font-sans); margin-top: var(--sp-6); }
.doc p, .doc ol, .doc ul { margin-top: var(--sp-4); }
.doc ol, .doc ul { padding-left: var(--sp-6); }
.doc li + li { margin-top: var(--sp-3); }
.doc .lede { color: var(--text-secondary); }
.doc .actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--gap-list); }
.doc .actions + p { margin-top: var(--sp-4); }
.doc table { border-collapse: collapse; width: 100%; margin-top: var(--sp-4); font-size: var(--fs-callout); line-height: var(--lh-callout); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: var(--bw-hairline) solid var(--border-subtle); }
.doc th { font-weight: var(--fw-semibold); color: var(--text-secondary); }
.table-scroll { overflow-x: auto; }

/* ---- footer ---- */
.site-footer {
  margin-top: var(--sp-11);
  padding-top: var(--sp-5);
  border-top: var(--bw-hairline) solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  font: var(--fw-regular) var(--fs-caption) / var(--lh-caption) var(--font-sans);
  color: var(--text-secondary);
}
.site-footer nav { display: flex; gap: var(--sp-5); }
.site-footer a { color: var(--text-secondary); }
.site-footer a:hover { color: var(--text-primary); }