/*
 * GENERATED FILE — do not edit.
 * Source: packages/design-tokens/src/{semantic,spacing,typography}.ts
 * Regenerate: pnpm --filter @everything/design-tokens generate:css
 *
 * Framework-neutral by design: plain custom properties, no @theme and no Tailwind
 * directives, so anything that understands CSS can consume this. Tailwind projects
 * import `tailwind-theme.css` alongside it to get utilities.
 */

:root {
  --et-color-bg-default: #FFFDF9;
  --et-color-bg-elevated: #FCFAF6;
  --et-color-bg-subtle: #FFFFFF;
  --et-color-bg-sunken: #F7F3EB;
  --et-color-bg-inverse: #1C0006;
  --et-color-surface-disabled: #DCD2BF;
  --et-color-surface-skeleton: #F0EFEB;
  --et-color-hero-bg: #3E000D;
  --et-color-hero-border: #230007;
  --et-color-hero-skeleton: rgba(255,248,232,0.08);
  --et-color-hero-fg: #FFF8E8;
  --et-color-hero-label: rgba(246,234,208,0.6);
  --et-color-text-primary: #3E000D;
  --et-color-text-secondary: #786E67;
  --et-color-text-tertiary: #5E544E;
  --et-color-text-muted: #61434A;
  --et-color-text-footnote: rgba(28,0,6,0.42);
  --et-color-text-on-inverse: #FFF8E8;
  --et-color-ink-hidden: rgba(0,0,0,0.004);
  --et-color-text-on-brand: #FFFFFF;
  --et-color-text-disabled: rgba(28,0,6,0.62);
  --et-color-brand-primary: #FB612E;
  --et-color-brand-ink: #AD3E10;
  --et-color-brand-primary-pressed: #D54F22;
  --et-color-brand-subtle: #FFF0EB;
  --et-color-border-subtle: rgba(62,0,13,0.06);
  --et-color-border-default: rgba(62,0,13,0.08);
  --et-color-border-control: rgba(62,0,13,0.45);
  --et-color-border-strong: rgba(62,0,13,0.12);
  --et-color-border-checkbox: rgba(62,0,13,0.5);
  --et-color-grabber: rgba(62,0,13,0.15);
  --et-color-danger: #DB2C2C;
  --et-color-success: #117143;
  --et-color-price-up: #117143;
  --et-color-price-down: #DB2C2C;
  --et-color-up-bg: #E8F9ED;
  --et-color-up-fg: #117143;
  --et-color-success-surface: #EAF6EC;
  --et-color-down-bg: #FDEDED;
  --et-color-down-fg: #B82121;
  --et-color-danger-border: rgba(219,44,44,0.25);
  --et-color-flat-bg: #F0EFEB;
  --et-color-flat-fg: #5E544E;
  --et-color-pending-bg: #FEF7E6;
  --et-color-pending-fg: #F59E0B;
  --et-color-pending-ink: #7A4F00;
  --et-color-pending-border: rgba(245,158,11,0.35);
  --et-color-info-bg: #E6F5FE;
  --et-color-info-ink: #0A5F90;
  --et-color-info-border: rgba(0,156,243,0.25);
  --et-color-send-icon-bg: #FEE8DF;
  --et-color-send-icon-fg: #FB612E;
  --et-color-spark-up: #40C057;
  --et-color-spark-down: #DB2C2C;
  --et-color-spark-flat: #A49A91;
  --et-color-chart-fill: rgba(251,97,46,0.08);
  --et-color-icon-outline: #94887E;
  --et-color-scrim: rgba(28,0,6,0.55);
  --et-color-sheet-scrim: rgba(28,0,6,0.45);

  --et-spacing-xs: 4px;
  --et-spacing-sm: 8px;
  --et-spacing-md: 16px;
  --et-spacing-lg: 24px;
  --et-spacing-xl: 32px;
  --et-spacing-badge-y: 2px;
  --et-spacing-nudge: 3px;
  --et-spacing-inline-gap: 6px;
  --et-spacing-list-gap: 10px;
  --et-spacing-row-gap: 12px;
  --et-spacing-row-y: 13px;
  --et-spacing-row-y-loose: 14px;
  --et-spacing-block-gap: 18px;
  --et-spacing-screen-x: 20px;

  --et-radius-sm: 6px;
  --et-radius-md: 8px;
  --et-radius-lg: 12px;
  --et-radius-xl: 16px;
  --et-radius-full: 9999px;
  --et-radius-badge: 6px;
  --et-radius-checkbox: 7px;
  --et-radius-change-pill: 8px;
  --et-radius-fee-box: 10px;
  --et-radius-button: 9999px;
  --et-radius-field: 12px;
  --et-radius-code-box: 12px;
  --et-radius-card: 16px;
  --et-radius-hero: 20px;
  --et-radius-sheet: 24px;
  --et-radius-fid: 24px;
  --et-radius-pill: 9999px;

  --et-font-amount-size: 42px;
  --et-font-line-height-amount: 48px;
  --et-font-display-size: 36px;
  --et-font-line-height-display: 42px;
  --et-font-total-size: 34px;
  --et-font-line-height-total: 42px;
  --et-font-price-size: 32px;
  --et-font-line-height-price: 40px;
  --et-font-hero-size: 30px;
  --et-font-line-height-hero: 38px;
  --et-font-tx-amount-size: 28px;
  --et-font-title-xl-size: 26px;
  --et-font-title-lg-size: 24px;
  --et-font-title-md-size: 22px;
  --et-font-title-size: 20px;
  --et-font-holding-size: 18px;
  --et-font-sheet-title-size: 17px;
  --et-font-body-lg-size: 16px;
  --et-font-subhead-size: 15px;
  --et-font-body-size: 14px;
  --et-font-footnote-size: 13px;
  --et-font-caption-size: 12px;
  --et-font-badge-size: 11px;
  --et-font-tab-label-size: 10px;
  --et-font-line-height-body: 20px;
  --et-font-line-height-title: 28px;
  --et-font-line-height-relaxed: 21px;
  --et-font-line-height-loose: 22px;
  --et-font-line-height-footnote: 19px;
  --et-font-line-height-caption: 18px;
}

/* Explicit opt-in, e.g. <html data-theme="dark">. */
[data-theme="dark"] {
  --et-color-bg-default: #1A1411;
  --et-color-bg-elevated: #241C17;
  --et-color-bg-subtle: #1F1814;
  --et-color-bg-sunken: #100C0A;
  --et-color-bg-inverse: #FFF8E8;
  --et-color-surface-disabled: #0A0706;
  --et-color-surface-skeleton: rgba(255,248,232,0.08);
  --et-color-hero-bg: #5E0C1C;
  --et-color-hero-border: #4C0916;
  --et-color-hero-skeleton: rgba(255,248,232,0.08);
  --et-color-hero-fg: #FFF8E8;
  --et-color-hero-label: rgba(246,234,208,0.6);
  --et-color-text-primary: #FFF8E8;
  --et-color-text-secondary: #8F8279;
  --et-color-text-tertiary: #B0A399;
  --et-color-text-muted: #736760;
  --et-color-text-footnote: rgba(255,248,232,0.40);
  --et-color-text-on-inverse: #1C0006;
  --et-color-ink-hidden: rgba(0,0,0,0.004);
  --et-color-text-on-brand: #FFFFFF;
  --et-color-text-disabled: rgba(255,248,232,0.5);
  --et-color-brand-primary: #FB612E;
  --et-color-brand-ink: #FF7A4D;
  --et-color-brand-primary-pressed: #FF7A4D;
  --et-color-brand-subtle: #3E241A;
  --et-color-border-subtle: rgba(255,248,232,0.08);
  --et-color-border-default: rgba(255,248,232,0.12);
  --et-color-border-control: rgba(255,248,232,0.35);
  --et-color-border-strong: rgba(255,248,232,0.18);
  --et-color-border-checkbox: rgba(255,248,232,0.40);
  --et-color-grabber: rgba(255,248,232,0.22);
  --et-color-danger: #E05E5B;
  --et-color-success: #3FAE78;
  --et-color-price-up: #3FAE78;
  --et-color-price-down: #E05E5B;
  --et-color-up-bg: #12291C;
  --et-color-up-fg: #3FAE78;
  --et-color-success-surface: #142C1E;
  --et-color-down-bg: #2E1416;
  --et-color-down-fg: #E05E5B;
  --et-color-danger-border: rgba(224,94,91,0.35);
  --et-color-flat-bg: #0A0706;
  --et-color-flat-fg: #8F8279;
  --et-color-pending-bg: #2E2410;
  --et-color-pending-fg: #F59E0B;
  --et-color-pending-ink: #F59E0B;
  --et-color-pending-border: rgba(245,158,11,0.19);
  --et-color-info-bg: #0F2836;
  --et-color-info-ink: #009CF3;
  --et-color-info-border: rgba(0,156,243,0.24);
  --et-color-send-icon-bg: #3A2318;
  --et-color-send-icon-fg: #FB612E;
  --et-color-spark-up: #40C057;
  --et-color-spark-down: #E05E5B;
  --et-color-spark-flat: #736760;
  --et-color-chart-fill: rgba(250,97,46,0.14);
  --et-color-icon-outline: #736760;
  --et-color-scrim: rgba(8,0,2,0.72);
  --et-color-sheet-scrim: rgba(8,0,2,0.62);
}

/* System preference, unless the page has explicitly asked for light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --et-color-bg-default: #1A1411;
    --et-color-bg-elevated: #241C17;
    --et-color-bg-subtle: #1F1814;
    --et-color-bg-sunken: #100C0A;
    --et-color-bg-inverse: #FFF8E8;
    --et-color-surface-disabled: #0A0706;
    --et-color-surface-skeleton: rgba(255,248,232,0.08);
    --et-color-hero-bg: #5E0C1C;
    --et-color-hero-border: #4C0916;
    --et-color-hero-skeleton: rgba(255,248,232,0.08);
    --et-color-hero-fg: #FFF8E8;
    --et-color-hero-label: rgba(246,234,208,0.6);
    --et-color-text-primary: #FFF8E8;
    --et-color-text-secondary: #8F8279;
    --et-color-text-tertiary: #B0A399;
    --et-color-text-muted: #736760;
    --et-color-text-footnote: rgba(255,248,232,0.40);
    --et-color-text-on-inverse: #1C0006;
    --et-color-ink-hidden: rgba(0,0,0,0.004);
    --et-color-text-on-brand: #FFFFFF;
    --et-color-text-disabled: rgba(255,248,232,0.5);
    --et-color-brand-primary: #FB612E;
    --et-color-brand-ink: #FF7A4D;
    --et-color-brand-primary-pressed: #FF7A4D;
    --et-color-brand-subtle: #3E241A;
    --et-color-border-subtle: rgba(255,248,232,0.08);
    --et-color-border-default: rgba(255,248,232,0.12);
    --et-color-border-control: rgba(255,248,232,0.35);
    --et-color-border-strong: rgba(255,248,232,0.18);
    --et-color-border-checkbox: rgba(255,248,232,0.40);
    --et-color-grabber: rgba(255,248,232,0.22);
    --et-color-danger: #E05E5B;
    --et-color-success: #3FAE78;
    --et-color-price-up: #3FAE78;
    --et-color-price-down: #E05E5B;
    --et-color-up-bg: #12291C;
    --et-color-up-fg: #3FAE78;
    --et-color-success-surface: #142C1E;
    --et-color-down-bg: #2E1416;
    --et-color-down-fg: #E05E5B;
    --et-color-danger-border: rgba(224,94,91,0.35);
    --et-color-flat-bg: #0A0706;
    --et-color-flat-fg: #8F8279;
    --et-color-pending-bg: #2E2410;
    --et-color-pending-fg: #F59E0B;
    --et-color-pending-ink: #F59E0B;
    --et-color-pending-border: rgba(245,158,11,0.19);
    --et-color-info-bg: #0F2836;
    --et-color-info-ink: #009CF3;
    --et-color-info-border: rgba(0,156,243,0.24);
    --et-color-send-icon-bg: #3A2318;
    --et-color-send-icon-fg: #FB612E;
    --et-color-spark-up: #40C057;
    --et-color-spark-down: #E05E5B;
    --et-color-spark-flat: #736760;
    --et-color-chart-fill: rgba(250,97,46,0.14);
    --et-color-icon-outline: #736760;
    --et-color-scrim: rgba(8,0,2,0.72);
    --et-color-sheet-scrim: rgba(8,0,2,0.62);
  }
}

/*
 * The site's own rules. The build writes `packages/design-tokens/src/tokens.css` ahead of
 * this file into the one stylesheet (`STYLESHEET_PATH`), so every `--et-*` variable used here is defined by
 * the time it is read.
 *
 * Colours come only from those variables. The token file switches them itself: it follows
 * `prefers-color-scheme`, and `data-theme` on `<html>` would override that — the pages set
 * no `data-theme`, so the visitor's system setting decides. Nothing here writes a colour.
 *
 * The pages are long-form legal text read mostly on phones, so the rules below serve three
 * things: a comfortable reading measure, no horizontal scroll of the page at any width (a
 * wide table scrolls inside itself instead), and links that are visibly links and visibly
 * focused. The CSP allows this stylesheet and nothing else, so no rule may rely on an
 * inline `style` attribute or a script.
 */

:root {
  /* Form controls and scrollbars follow the theme too, not only what is drawn here. */
  color-scheme: light dark;
  --measure: 720px;
  --gutter: var(--et-spacing-md);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--et-color-text-primary);
  background: var(--et-color-bg-default);
  /* Long e-mail addresses and URLs in the legal texts would otherwise widen the page. */
  overflow-wrap: break-word;
}

/*
 * CJK text reads better with more leading than Latin at the same size. Set where the
 * language starts rather than on every `:lang(zh)` element, so headings keep their own.
 */
body:lang(zh),
.not-found-part:lang(zh) {
  line-height: 1.75;
}

/* ---- Page frame ---------------------------------------------------------------------- */

.site-header,
main,
.site-footer {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: calc(-1 * var(--et-spacing-xl) * 3);
  z-index: 1;
  padding: var(--et-spacing-sm) var(--et-spacing-md);
  border-radius: var(--et-radius-md);
  background: var(--et-color-bg-elevated);
  color: var(--et-color-text-primary);
}

.skip-link:focus {
  top: var(--et-spacing-sm);
}

.site-header {
  padding-block: var(--et-spacing-md) 0;
  border-bottom: 1px solid var(--et-color-border-default);
}

.site-header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--et-spacing-sm) var(--et-spacing-md);
}

.wordmark {
  font-size: var(--et-font-title-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--et-color-text-primary);
  text-decoration: none;
}

.language-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--et-spacing-sm);
}

.language-switch a {
  display: inline-block;
  padding: var(--et-spacing-list-gap) var(--et-spacing-md);
  border: 1px solid var(--et-color-border-control);
  line-height: 1.6;
  border-radius: var(--et-radius-pill);
  font-size: var(--et-font-body-size);
  color: var(--et-color-text-primary);
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--et-spacing-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  /* 15px text at this line height plus the padding is a 44px tap target. */
  padding-block: var(--et-spacing-list-gap);
  font-size: var(--et-font-subhead-size);
  color: var(--et-color-text-tertiary);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--et-color-text-primary);
}

.site-nav a[aria-current="page"] {
  color: var(--et-color-text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

main {
  padding-block: var(--et-spacing-lg) var(--et-spacing-xl);
}

.site-footer {
  padding-block: var(--et-spacing-lg) var(--et-spacing-xl);
  border-top: 1px solid var(--et-color-border-default);
  font-size: var(--et-font-body-size);
  color: var(--et-color-text-tertiary);
}

.site-footer p {
  margin: 0 0 var(--et-spacing-xs);
}

/* ---- Links and focus ----------------------------------------------------------------- */

/*
 * Link text is `brand-ink`, the brand colour's text-contrast shade; `brand-primary` is for
 * shapes only and is too light for words on the page background.
 */
a {
  color: var(--et-color-brand-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--et-color-brand-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Long-form text ------------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  font-weight: 700;
  /* Headings are link targets (the table of contents, section anchors). */
  scroll-margin-top: var(--et-spacing-md);
}

h1 {
  margin: var(--et-spacing-sm) 0 var(--et-spacing-md);
  font-size: var(--et-font-title-xl-size);
}

h2 {
  margin: var(--et-spacing-xl) 0 var(--et-spacing-sm);
  font-size: var(--et-font-title-md-size);
}

h3 {
  margin: var(--et-spacing-lg) 0 var(--et-spacing-sm);
  font-size: var(--et-font-title-size);
}

h4,
h5,
h6 {
  margin: var(--et-spacing-lg) 0 var(--et-spacing-xs);
  font-size: var(--et-font-body-lg-size);
}

p,
ul,
ol,
dl,
blockquote,
pre,
table {
  margin: 0 0 var(--et-spacing-md);
}

ul,
ol {
  padding-inline-start: 1.5em;
}

main li + li {
  margin-top: var(--et-spacing-xs);
}

main li > ul,
main li > ol {
  margin-top: var(--et-spacing-xs);
  margin-bottom: 0;
}

strong {
  font-weight: 700;
}

blockquote {
  padding: var(--et-spacing-row-gap) var(--et-spacing-md);
  border-inline-start: 3px solid var(--et-color-border-control);
  border-radius: 0 var(--et-radius-md) var(--et-radius-md) 0;
  background: var(--et-color-bg-sunken);
  color: var(--et-color-text-tertiary);
}

blockquote > :last-child {
  margin-bottom: 0;
}

hr {
  margin: var(--et-spacing-xl) 0;
  border: 0;
  border-top: 1px solid var(--et-color-border-default);
}

code {
  padding: 0.1em 0.3em;
  border-radius: var(--et-radius-sm);
  background: var(--et-color-bg-sunken);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

pre {
  padding: var(--et-spacing-md);
  border-radius: var(--et-radius-md);
  background: var(--et-color-bg-sunken);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: none;
  overflow-wrap: normal;
}

img {
  max-width: 100%;
  height: auto;
}

/*
 * A table wider than the screen scrolls inside its own box (`.table-scroll`, which the
 * markdown renderer wraps every table in); the page never does. The table itself keeps its
 * native display so screen readers still announce it as a table. The cell minimum keeps a
 * many-column table from collapsing into one-word lines on a phone, which is what makes it
 * wide enough to scroll rather than unreadably narrow.
 */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  font-size: var(--et-font-subhead-size);
  line-height: 1.5;
}

th,
td {
  min-width: 8em;
  padding: var(--et-spacing-sm) var(--et-spacing-row-gap);
  border: 1px solid var(--et-color-border-strong);
  text-align: start;
  vertical-align: top;
}

th {
  background: var(--et-color-bg-sunken);
  font-weight: 600;
}

/* The table of contents at the top of a legal text. */
main nav {
  margin: 0 0 var(--et-spacing-lg);
  padding: var(--et-spacing-md) var(--et-spacing-md) var(--et-spacing-xs);
  border: 1px solid var(--et-color-border-default);
  border-radius: var(--et-radius-card);
  background: var(--et-color-bg-elevated);
  font-size: var(--et-font-subhead-size);
}

/* The entries carry their section numbers, so the list draws no markers of its own. */
main nav ul,
main nav ol {
  margin-bottom: var(--et-spacing-row-gap);
  padding-inline-start: 0;
  list-style: none;
}

main nav li > ul,
main nav li > ol {
  margin-bottom: 0;
  padding-inline-start: 1em;
}

/* ---- Home and not-found -------------------------------------------------------------- */

.lead {
  font-size: 1.125rem;
  color: var(--et-color-text-tertiary);
}

.page-list {
  margin: var(--et-spacing-lg) 0 0;
  padding: 0;
  list-style: none;
}

.page-list li {
  margin: 0;
  padding: var(--et-spacing-md) 0;
  border-top: 1px solid var(--et-color-border-default);
}

.page-list li:last-child {
  border-bottom: 1px solid var(--et-color-border-default);
}

.page-list a {
  font-size: 1.125rem;
  font-weight: 600;
}

.page-list p {
  margin: var(--et-spacing-xs) 0 0;
  color: var(--et-color-text-tertiary);
}

.not-found-part + .not-found-part {
  margin-top: var(--et-spacing-lg);
  padding-top: var(--et-spacing-lg);
  border-top: 1px solid var(--et-color-border-default);
}