/* ============================================================
   Wealthsimple Design Language — drop-in tokens + base styles
   Measured from wealthsimple.com (/en-ca/trade, /en-ca, /en-ca/magazine),
   September 2026.

   Usage: <body class="ws">
   Sections: wrap each product band in .ws-field and set --ws-field / --ws-on-field.

   Both faces are proprietary (Adobe Fonts). Free substitutes:
   <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Newsreader:wght@400&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---- Faces: sans carries the system, serif carries the written moments ---- */
  --ws-font: "the-future", "Manrope", system-ui, "Helvetica Neue", sans-serif;
  --ws-font-serif: "tiempos", "Newsreader", Georgia, "Times New Roman", serif;

  --ws-w-regular: 400;
  --ws-w-medium: 500;
  --ws-w-semibold: 600;   /* only at the card-headline step */

  /* ---- Tracking runs in opposite directions per face ---- */
  --ws-track-sans: 0.005em;
  --ws-track-serif: -0.01em;

  /* ---- Type scale ---- */
  --ws-editorial-hero: 200px;  --ws-editorial-hero-lh: 1.08;
  --ws-hero: 90px;             --ws-hero-lh: 1;
  --ws-display: 64px;          --ws-display-lh: 1.16;
  --ws-editorial-display: 56px;--ws-editorial-display-lh: 1.16;
  --ws-title-lg: 48px;         --ws-title-lg-lh: 1.16;
  --ws-title-md: 24px;         --ws-title-md-lh: 1.44;
  --ws-title-sm: 18px;         --ws-title-sm-lh: 1.16;
  --ws-body: 18px;             --ws-body-lh: 1.4;
  --ws-body-medium: 16px;      --ws-body-medium-lh: 1.4;
  --ws-label: 14px;            --ws-label-lh: 1.4;
  --ws-eyebrow: 12px;          --ws-eyebrow-lh: 1;   --ws-eyebrow-track: 0.08em;

  /* ---- Radius: pill means interactive, 12px means container ---- */
  --ws-radius-small: 4px;
  --ws-radius-normal: 12px;
  --ws-radius-large: 24px;
  --ws-radius-xlarge: 32px;
  --ws-radius-pill: 1000px;
  --ws-radius-circle: 50%;

  /* ---- Spacing: --ws-spacing-N = N x 0.25rem in the source system ---- */
  --ws-space-xs: 4px;
  --ws-space-sm: 8px;
  --ws-space-md: 12px;
  --ws-space-base: 16px;
  --ws-space-lg: 24px;
  --ws-space-xl: 32px;
  --ws-space-xxl: 48px;
  --ws-section-sm: 64px;
  --ws-section: 96px;
  --ws-section-lg: 160px;

  /* ---- Layout ---- */
  --ws-container: 1264px;
  --ws-container-nav: 1440px;
  --ws-container-inline: 40px;
  --ws-header-height: 92px;

  /* ---- Motion: one custom curve, 81 elements use it ---- */
  --ws-ease: cubic-bezier(.241, .969, .635, .997);
  --ws-duration: .35s;
  --ws-duration-fast: .15s;
  --ws-duration-fade: .914s;

  /* ---- Elevation: the only shadow in the system ---- */
  --ws-shadow-floating: 0 1px 4px 0 rgb(16 24 40 / 10%), 0 1px 2px 0 rgb(16 24 40 / 6%);
}

/* ============================================================
   Colours — a warm greyscale. There is no brand accent.
   ============================================================ */
.ws {
  --ws-ink: #1c1b1b;
  --ws-ink-strong: #32302f;
  --ws-ink-secondary: #686664;
  --ws-ink-muted: #868686;
  --ws-ink-inverse: #fcfcfc;

  --ws-background: #fcfcfc;
  --ws-background-white: #ffffff;
  --ws-background-warm: #f5f3ef;
  --ws-background-linen: #eeece7;
  --ws-background-linen-light: #faf8f5;
  --ws-background-midnight: #09090a;

  --ws-slate-30: #494645;
  --ws-slate-50: #7a7674;
  --ws-slate-60: #94908d;
  --ws-slate-70: #afaaa7;
  --ws-slate-80: #c9c6c4;
  --ws-slate-90: #e4e2e1;
  --ws-slate-95: #f1f0f0;
  --ws-slate-98: #f8f8f8;
  --ws-greyscale-75: #c2c2c2;
  --ws-greyscale-95: #f2f2f2;

  --ws-outlines: #e4e2e1;
  --ws-outlines-active: #afaaa7;
  --ws-borders: #32302f;

  /* semantic, named by material rather than by function */
  --ws-celery-40: #486635;   /* success text */
  --ws-celery-70: #99b383;   /* success fill */
  --ws-terracotta-40: #a43d12;  /* error text */
  --ws-terracotta-70: #ff8a71;  /* error fill */
  --ws-background-error: #f2dedb;

  /* section fields — art direction, applied per product band */
  --ws-field-ink: #080f16;
  --ws-field-plum: #5f5974;
  --ws-field-clay: #564c47;
  --ws-field-forest: #0c330d;
  --ws-field-butter: #eee3b1;

  margin: 0;
  font-family: var(--ws-font);
  font-size: var(--ws-body);
  line-height: var(--ws-body-lh);
  font-weight: var(--ws-w-regular);
  color: var(--ws-ink);
  background: var(--ws-background);
  -webkit-font-smoothing: antialiased;
}

.ws h1, .ws h2, .ws h3, .ws p, .ws ul { margin: 0; }
.ws a { color: inherit; text-decoration: none; }
.ws a:focus-visible, .ws button:focus-visible {
  outline: 3px solid color-mix(in srgb, #1c1b1b 50%, transparent);
  outline-offset: 2px;
}

/* ---- Sans steps: positive tracking throughout ---- */
.ws .hero, .ws .display, .ws .title-lg, .ws .title-md, .ws .title-sm {
  font-family: var(--ws-font); color: var(--ws-ink); text-wrap: balance;
}
.ws .hero     { font-size: var(--ws-hero);     line-height: var(--ws-hero-lh);     font-weight: var(--ws-w-regular); }
.ws .display  { font-size: var(--ws-display);  line-height: var(--ws-display-lh);  font-weight: var(--ws-w-medium); letter-spacing: var(--ws-track-sans); }
.ws .title-lg { font-size: var(--ws-title-lg); line-height: var(--ws-title-lg-lh); font-weight: var(--ws-w-medium); letter-spacing: var(--ws-track-sans); }
.ws .title-md { font-size: var(--ws-title-md); line-height: var(--ws-title-md-lh); font-weight: var(--ws-w-semibold); }
.ws .title-sm { font-size: var(--ws-title-sm); line-height: var(--ws-title-sm-lh); font-weight: var(--ws-w-medium); letter-spacing: var(--ws-track-sans); }

/* ---- Serif steps: negative tracking. Never mix the two. ---- */
.ws .editorial-hero, .ws .editorial-display, .ws .editorial-title {
  font-family: var(--ws-font-serif); font-weight: var(--ws-w-regular);
  letter-spacing: var(--ws-track-serif); color: var(--ws-ink); text-wrap: balance;
}
.ws .editorial-hero    { font-size: var(--ws-editorial-hero);    line-height: var(--ws-editorial-hero-lh); }
.ws .editorial-display { font-size: var(--ws-editorial-display); line-height: var(--ws-editorial-display-lh); }
.ws .editorial-title   { font-size: var(--ws-title-lg);          line-height: var(--ws-title-lg-lh); }

/* ---- Text ---- */
.ws .body        { font-size: var(--ws-body); line-height: var(--ws-body-lh); }
.ws .body-medium { font-size: var(--ws-body-medium); line-height: var(--ws-body-medium-lh); font-weight: var(--ws-w-medium); letter-spacing: var(--ws-track-sans); }
.ws .label       { font-size: var(--ws-label); line-height: var(--ws-label-lh); font-weight: var(--ws-w-medium); letter-spacing: var(--ws-track-sans); }
.ws .eyebrow     { font-size: var(--ws-eyebrow); line-height: var(--ws-eyebrow-lh); font-weight: var(--ws-w-medium);
                   letter-spacing: var(--ws-eyebrow-track); color: var(--ws-ink-secondary); }
.ws .secondary   { color: var(--ws-ink-secondary); }

/* ---- Buttons: every one is a pill ---- */
.ws .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ws-space-sm);
  font: inherit; font-size: var(--ws-label); font-weight: var(--ws-w-medium);
  letter-spacing: var(--ws-track-sans); line-height: var(--ws-label-lh);
  border: 0; cursor: pointer; white-space: nowrap;
  border-radius: var(--ws-radius-pill); padding: 12px 16px;
  background: var(--ws-ink); color: var(--ws-ink-inverse);
  transition: background-color var(--ws-duration) var(--ws-ease),
              border-color var(--ws-duration) var(--ws-ease);
}
.ws .btn:active { background: var(--ws-ink-strong); }
.ws .btn--lg { font-size: var(--ws-body-medium); padding: 20px 32px; }
.ws .btn--inverse { background: var(--ws-ink-inverse); color: var(--ws-ink); }
.ws .btn--inverse:active { background: var(--ws-slate-90); }
/* takes its character from whatever field it sits on */
.ws .btn--translucent {
  background: color-mix(in srgb, var(--ws-on-field, #fcfcfc) 20%, transparent);
  color: var(--ws-on-field, var(--ws-ink));
}
.ws .nav-item {
  display: inline-flex; align-items: center;
  font: inherit; font-size: var(--ws-label); font-weight: var(--ws-w-medium);
  letter-spacing: var(--ws-track-sans);
  background: transparent; color: var(--ws-ink-inverse); border: 0; cursor: pointer;
  border-radius: var(--ws-radius-normal); padding: 6px 12px;
  transition: color .1s ease-in;
}

/* ---- Inputs are pills too ---- */
.ws .input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: var(--ws-body); line-height: var(--ws-body-lh);
  background: var(--ws-background-white); color: var(--ws-ink);
  border: 1px solid var(--ws-outlines);
  border-radius: var(--ws-radius-pill);
  height: 64px; padding: 20px 24px;
}
.ws .input::placeholder { color: var(--ws-ink-muted); }
.ws .input:focus { outline: 3px solid color-mix(in srgb, #1c1b1b 50%, transparent); outline-offset: 2px; border-color: var(--ws-outlines-active); }
.ws .input[disabled] { opacity: .6; background: color-mix(in srgb, #1c1b1b 10%, transparent); }
.ws .input-error { color: var(--ws-terracotta-40); font-size: var(--ws-label); }
.ws .input-success { color: var(--ws-celery-40); font-size: var(--ws-label); }

/* ---- Cards: a rule, never a shadow ---- */
.ws .card {
  background: var(--ws-background-white);
  border: 1px solid var(--ws-outlines);
  border-radius: var(--ws-radius-normal);
  padding: var(--ws-space-lg);
}
.ws .card--large { border-radius: var(--ws-radius-large); }
.ws .floating { box-shadow: var(--ws-shadow-floating); }

/* ---- Section fields: the signature component ---- */
.ws .ws-field {
  background: var(--ws-field, var(--ws-background-warm));
  color: var(--ws-on-field, var(--ws-ink));
  padding-block: var(--ws-section);
}
.ws .ws-field .hero, .ws .ws-field .display, .ws .ws-field .title-lg,
.ws .ws-field .title-md, .ws .ws-field .title-sm,
.ws .ws-field .editorial-hero, .ws .ws-field .editorial-display { color: inherit; }
.ws .field--ink    { --ws-field: var(--ws-field-ink);    --ws-on-field: var(--ws-ink-inverse); }
.ws .field--plum   { --ws-field: var(--ws-field-plum);   --ws-on-field: var(--ws-ink-inverse); }
.ws .field--clay   { --ws-field: var(--ws-field-clay);   --ws-on-field: var(--ws-ink-inverse); }
.ws .field--forest { --ws-field: var(--ws-field-forest); --ws-on-field: var(--ws-ink-inverse); }
.ws .field--butter { --ws-field: var(--ws-field-butter); --ws-on-field: var(--ws-ink); }
.ws .field--warm   { --ws-field: var(--ws-background-warm); --ws-on-field: var(--ws-ink); }

/* ---- Structure ---- */
.ws .container { max-width: var(--ws-container); margin-inline: auto; padding-inline: var(--ws-container-inline); }
.ws .container--nav { max-width: var(--ws-container-nav); }
.ws .header {
  position: sticky; top: 0; z-index: 20;
  min-height: var(--ws-header-height);
  display: flex; align-items: center;
  background: color-mix(in srgb, #32302f 90%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--ws-ink-inverse);
}
.ws .divider { border: 0; border-top: 1px solid var(--ws-outlines); margin: 0; }
.ws .section { padding-block: var(--ws-section); }