/* Ledger, refined. Tokens, the self-hosted faces, and the type that every page inherits.
   Components live in styles.css and read these variables. No font CDN.

   @font-face cannot read a custom property, so the family name is written twice
   on purpose. Inter is one variable file (weight and optical size). IBM Plex Mono
   is 400 and 500, for references, file names and IDs only. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/InterVariable.woff2?v=ced16e861f0e") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-latin-400.woff2?v=ced16e861f0e") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-latin-500.woff2?v=ced16e861f0e") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* One family for UI and headings. Mono is opt-in. The fallback is sans-serif. */
  --brand-font-display: "Inter";
  --brand-font-ui: "Inter";
  --brand-font-mono: "IBM Plex Mono";
  --brand-font-display-family: var(--brand-font-ui), sans-serif;
  --brand-font-ui-family: var(--brand-font-ui), sans-serif;
  --brand-font-mono-family: var(--brand-font-mono), ui-monospace, monospace;
  --brand-weight-regular: 400;
  --brand-weight-medium: 500;
  --brand-weight-semibold: 600;

  /* Type scale. Mobile sizes override display, h1 and h2 below 640px. */
  --brand-text-display: 56px;
  --brand-leading-display: 60px;
  --brand-tracking-display: -0.035em;
  --brand-text-h1: 40px;
  --brand-leading-h1: 48px;
  --brand-tracking-h1: -0.03em;
  --brand-text-h2: 28px;
  --brand-leading-h2: 36px;
  --brand-tracking-h2: -0.022em;
  --brand-text-h3: 20px;
  --brand-leading-h3: 28px;
  --brand-tracking-h3: -0.014em;
  --brand-text-title: 16px;
  --brand-leading-title: 24px;
  --brand-tracking-title: -0.011em;
  --brand-text-lead: 18px;
  --brand-leading-lead: 28px;
  --brand-tracking-lead: -0.014em;
  --brand-text-body: 16px;
  --brand-leading-body: 26px;
  --brand-tracking-body: -0.011em;
  --brand-text-ui: 14px;
  --brand-leading-ui: 20px;
  --brand-tracking-ui: -0.006em;
  --brand-text-small: 13px;
  --brand-leading-small: 18px;
  --brand-tracking-small: -0.003em;
  --brand-text-label: 11px;
  --brand-leading-label: 16px;
  --brand-tracking-label: 0.06em;
  --brand-text-price: 44px;
  --brand-leading-price: 48px;
  --brand-tracking-price: -0.03em;
  --brand-text-mono: 13px;
  --brand-leading-mono: 20px;
  /* Tabular figures for counts and amounts. The face stays Inter. */
  --brand-numeric: tabular-nums;

  /* Space is a 4px grid, with 8px as the step most layouts use. */
  --brand-space-1: 4px;
  --brand-space-2: 8px;
  --brand-space-3: 12px;
  --brand-space-4: 16px;
  --brand-space-5: 20px;
  --brand-space-6: 24px;
  --brand-space-8: 32px;
  --brand-space-10: 40px;
  --brand-space-12: 48px;
  --brand-space-16: 64px;
  --brand-space-24: 96px;

  /* Radius: 4 Google slot, 6 inputs, 8 buttons, 12 cards, pill. */
  --brand-radius-xs: 4px;
  --brand-radius-sm: 6px;
  --brand-radius-md: 8px;
  --brand-radius-lg: 12px;
  --brand-radius-pill: 999px;
  --brand-control-height: 40px;
  --brand-input-height: 44px;

  /* The border does the work. The shadow only softens. */
  --brand-shadow-1: 0 1px 2px rgb(15 34 51 / 5%), 0 1px 1px rgb(15 34 51 / 3%);
  --brand-shadow-2: 0 1px 2px rgb(15 34 51 / 5%), 0 12px 32px -12px rgb(15 34 51 / 16%);
  --brand-shadow-primary: inset 0 1px 0 rgb(255 255 255 / 12%), 0 1px 2px rgb(15 34 51 / 14%);
  --brand-shadow-primary-active: inset 0 1px 2px rgb(0 0 0 / 18%);
  --brand-shadow-seg: 0 1px 2px rgb(15 34 51 / 8%), 0 0 0 1px rgb(15 34 51 / 6%);
  --brand-ring: 0 0 0 3px rgb(11 110 79 / 28%);
  --brand-ring-danger: 0 0 0 3px rgb(180 35 24 / 22%);
  --brand-focus-width: 2px;
  --brand-focus-offset: 2px;
  --brand-ease: 150ms cubic-bezier(0.2, 0, 0, 1);

  /* Palette. Hex values are the refined Ledger sheet. Do not add a colour that docs/brand.md does not name. */
  --brand-ink: #0F2233;
  --brand-emerald: #0B6E4F;
  --brand-emerald-hover: #095C42;
  --brand-mint: #3DDC97;
  --brand-mint-tint: #E6F4EE;
  --brand-surface: #F6F8F7;
  --brand-slate: #4B5B57;
  --brand-subtle: #5F6F6A;
  --brand-track: #EEF2F0;
  --brand-line-soft: #E9EEEC;
  --brand-error: #B42318;
  --brand-warning: #8A5A00;
  --brand-white: #FFFFFF;
  --brand-card-border: #D9E2DE;
  --brand-input: #6F7F7A;
  --brand-error-tint: #FDECEA;
  --brand-warning-tint: #FDF3E1;
  --brand-hover: #FAFBFA;
  --brand-secondary-hover: #FBFCFB;
  --brand-hover-border: #C9D3CF;

  /* Derived. mix(a, b, t) is t of a and the rest b, half-up per channel. See docs/brand.md. */
  --brand-dark-card: #1D2F3F;
  --brand-dark-muted: #B5BCBA;
  --brand-dark-error: #DA938E;
  --brand-dark-warning: #BCA16E;
  --brand-dark-track: #273847;
  --brand-dark-line: #354554;
  --brand-dark-hover: #2C3D4B;

  /* Roles, light. */
  --brand-color-bg: var(--brand-surface);
  --brand-color-text: var(--brand-ink);
  --brand-color-muted: var(--brand-slate);
  --brand-color-subtle: var(--brand-subtle);
  --brand-color-card: var(--brand-white);
  --brand-color-border: var(--brand-card-border);
  --brand-color-line: var(--brand-input);
  --brand-color-line-soft: var(--brand-line-soft);
  --brand-color-track: var(--brand-track);
  --brand-color-hover: var(--brand-hover);
  --brand-color-secondary-hover: var(--brand-secondary-hover);
  --brand-color-hover-border: var(--brand-hover-border);
  --brand-color-primary: var(--brand-emerald);
  --brand-color-on-primary: var(--brand-white);
  --brand-color-primary-hover: var(--brand-emerald-hover);
  --brand-color-accent: var(--brand-mint);
  --brand-color-link: var(--brand-emerald);
  --brand-color-link-hover: var(--brand-emerald-hover);
  --brand-color-success: var(--brand-emerald);
  --brand-color-success-bg: var(--brand-mint-tint);
  --brand-color-error: var(--brand-error);
  --brand-color-on-error: var(--brand-white);
  --brand-color-error-bg: var(--brand-error-tint);
  --brand-color-warning: var(--brand-warning);
  --brand-color-on-warning: var(--brand-white);
  --brand-color-warning-bg: var(--brand-warning-tint);
  --brand-color-focus: var(--brand-emerald);
  --brand-color-status-ok-bg: var(--brand-mint-tint);
  --brand-color-status-ok-text: var(--brand-emerald);
  --brand-color-status-warn-bg: var(--brand-warning-tint);
  --brand-color-status-warn-text: var(--brand-warning);
  --brand-color-status-bad-bg: var(--brand-error-tint);
  --brand-color-status-bad-text: var(--brand-error);

  /* Roles, dark. Mint is the text accent: emerald on ink is below 3:1.
     Status fills switch to the solid swatch with white text, because the
     lightened text colours fail on those solids. */
  --brand-color-bg-dark: var(--brand-ink);
  --brand-color-text-dark: var(--brand-white);
  --brand-color-muted-dark: var(--brand-dark-muted);
  --brand-color-card-dark: var(--brand-dark-card);
  --brand-color-border-dark: var(--brand-input);
  --brand-color-line-dark: var(--brand-input);
  --brand-color-primary-dark: var(--brand-emerald);
  --brand-color-on-primary-dark: var(--brand-white);
  --brand-color-link-dark: var(--brand-mint);
  --brand-color-link-hover-dark: var(--brand-mint);
  --brand-color-success-dark: var(--brand-mint);
  --brand-color-success-bg-dark: var(--brand-emerald);
  --brand-color-error-dark: var(--brand-dark-error);
  --brand-color-error-bg-dark: var(--brand-error);
  --brand-color-warning-dark: var(--brand-dark-warning);
  --brand-color-warning-bg-dark: var(--brand-warning);
  --brand-color-focus-dark: var(--brand-mint);
  --brand-color-subtle-dark: var(--brand-dark-muted);
  --brand-color-track-dark: var(--brand-dark-track);
  --brand-color-line-soft-dark: var(--brand-dark-line);
  --brand-color-hover-dark: var(--brand-dark-hover);
  --brand-color-secondary-hover-dark: var(--brand-dark-hover);
  --brand-color-hover-border-dark: var(--brand-input);
  --brand-color-status-ok-bg-dark: var(--brand-emerald);
  --brand-color-status-ok-text-dark: var(--brand-white);
  --brand-color-status-warn-bg-dark: var(--brand-warning);
  --brand-color-status-warn-text-dark: var(--brand-white);
  --brand-color-status-bad-bg-dark: var(--brand-error);
  --brand-color-status-bad-text-dark: var(--brand-white);
}

@media (max-width: 640px) {
  :root {
    --brand-text-display: 36px;
    --brand-leading-display: 40px;
    --brand-tracking-display: -0.028em;
    --brand-text-h1: 30px;
    --brand-leading-h1: 36px;
    --brand-tracking-h1: -0.028em;
    --brand-text-h2: 24px;
    --brand-leading-h2: 32px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-color-bg: var(--brand-color-bg-dark);
    --brand-color-text: var(--brand-color-text-dark);
    --brand-color-muted: var(--brand-color-muted-dark);
    --brand-color-subtle: var(--brand-color-subtle-dark);
    --brand-color-card: var(--brand-color-card-dark);
    --brand-color-border: var(--brand-color-border-dark);
    --brand-color-line: var(--brand-color-line-dark);
    --brand-color-line-soft: var(--brand-color-line-soft-dark);
    --brand-color-track: var(--brand-color-track-dark);
    --brand-color-hover: var(--brand-color-hover-dark);
    --brand-color-secondary-hover: var(--brand-color-secondary-hover-dark);
    --brand-color-hover-border: var(--brand-color-hover-border-dark);
    --brand-color-primary: var(--brand-color-primary-dark);
    --brand-color-on-primary: var(--brand-color-on-primary-dark);
    --brand-color-link: var(--brand-color-link-dark);
    --brand-color-link-hover: var(--brand-color-link-hover-dark);
    --brand-color-success: var(--brand-color-success-dark);
    --brand-color-success-bg: var(--brand-color-success-bg-dark);
    --brand-color-error: var(--brand-color-error-dark);
    --brand-color-error-bg: var(--brand-color-error-bg-dark);
    --brand-color-warning: var(--brand-color-warning-dark);
    --brand-color-warning-bg: var(--brand-color-warning-bg-dark);
    --brand-color-focus: var(--brand-color-focus-dark);
    --brand-color-status-ok-bg: var(--brand-color-status-ok-bg-dark);
    --brand-color-status-ok-text: var(--brand-color-status-ok-text-dark);
    --brand-color-status-warn-bg: var(--brand-color-status-warn-bg-dark);
    --brand-color-status-warn-text: var(--brand-color-status-warn-text-dark);
    --brand-color-status-bad-bg: var(--brand-color-status-bad-bg-dark);
    --brand-color-status-bad-text: var(--brand-color-status-bad-text-dark);
  }
}
:root[data-theme="dark"] {
  --brand-color-bg: var(--brand-color-bg-dark);
  --brand-color-text: var(--brand-color-text-dark);
  --brand-color-muted: var(--brand-color-muted-dark);
  --brand-color-subtle: var(--brand-color-subtle-dark);
  --brand-color-card: var(--brand-color-card-dark);
  --brand-color-border: var(--brand-color-border-dark);
  --brand-color-line: var(--brand-color-line-dark);
  --brand-color-line-soft: var(--brand-color-line-soft-dark);
  --brand-color-track: var(--brand-color-track-dark);
  --brand-color-hover: var(--brand-color-hover-dark);
  --brand-color-secondary-hover: var(--brand-color-secondary-hover-dark);
  --brand-color-hover-border: var(--brand-color-hover-border-dark);
  --brand-color-primary: var(--brand-color-primary-dark);
  --brand-color-on-primary: var(--brand-color-on-primary-dark);
  --brand-color-link: var(--brand-color-link-dark);
  --brand-color-link-hover: var(--brand-color-link-hover-dark);
  --brand-color-success: var(--brand-color-success-dark);
  --brand-color-success-bg: var(--brand-color-success-bg-dark);
  --brand-color-error: var(--brand-color-error-dark);
  --brand-color-error-bg: var(--brand-color-error-bg-dark);
  --brand-color-warning: var(--brand-color-warning-dark);
  --brand-color-warning-bg: var(--brand-color-warning-bg-dark);
  --brand-color-focus: var(--brand-color-focus-dark);
  --brand-color-status-ok-bg: var(--brand-color-status-ok-bg-dark);
  --brand-color-status-ok-text: var(--brand-color-status-ok-text-dark);
  --brand-color-status-warn-bg: var(--brand-color-status-warn-bg-dark);
  --brand-color-status-warn-text: var(--brand-color-status-warn-text-dark);
  --brand-color-status-bad-bg: var(--brand-color-status-bad-bg-dark);
  --brand-color-status-bad-text: var(--brand-color-status-bad-text-dark);
}

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

body {
  font-family: var(--brand-font-ui-family);
  font-weight: var(--brand-weight-regular);
  font-size: var(--brand-text-body);
  line-height: var(--brand-leading-body);
  letter-spacing: var(--brand-tracking-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: var(--brand-numeric);
}

/* Counts and amounts in prose, cards and tables. Inter, with tabular figures. */
.num,
.price,
.plan,
.plan-price,
.packs,
.totals,
table,
td.num,
th.num,
.meter {
  font-family: var(--brand-font-ui-family);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* References, file names and IDs. Amounts stay in Inter. */
.mono,
.files .name,
.table .ref {
  font-family: var(--brand-font-mono-family);
  font-weight: var(--brand-weight-regular);
  font-size: var(--brand-text-mono);
  line-height: var(--brand-leading-mono);
  letter-spacing: 0;
}
.mono-em { font-weight: var(--brand-weight-medium); }

.t-display {
  font-size: var(--brand-text-display);
  line-height: var(--brand-leading-display);
  font-weight: var(--brand-weight-semibold);
  letter-spacing: var(--brand-tracking-display);
}
.t-h1 {
  font-size: var(--brand-text-h1);
  line-height: var(--brand-leading-h1);
  font-weight: var(--brand-weight-semibold);
  letter-spacing: var(--brand-tracking-h1);
}
.t-h2 {
  font-size: var(--brand-text-h2);
  line-height: var(--brand-leading-h2);
  font-weight: var(--brand-weight-semibold);
  letter-spacing: var(--brand-tracking-h2);
}
.t-h3 {
  font-size: var(--brand-text-h3);
  line-height: var(--brand-leading-h3);
  font-weight: var(--brand-weight-semibold);
  letter-spacing: var(--brand-tracking-h3);
}
.t-title {
  font-size: var(--brand-text-title);
  line-height: var(--brand-leading-title);
  font-weight: var(--brand-weight-semibold);
  letter-spacing: var(--brand-tracking-title);
}
.t-lead {
  font-size: var(--brand-text-lead);
  line-height: var(--brand-leading-lead);
  font-weight: var(--brand-weight-regular);
  letter-spacing: var(--brand-tracking-lead);
  color: var(--brand-color-muted);
}
.t-body {
  font-size: var(--brand-text-body);
  line-height: var(--brand-leading-body);
  font-weight: var(--brand-weight-regular);
  letter-spacing: var(--brand-tracking-body);
}
.t-ui {
  font-size: var(--brand-text-ui);
  line-height: var(--brand-leading-ui);
  font-weight: var(--brand-weight-medium);
  letter-spacing: var(--brand-tracking-ui);
}
.t-small {
  font-size: var(--brand-text-small);
  line-height: var(--brand-leading-small);
  font-weight: var(--brand-weight-regular);
  letter-spacing: var(--brand-tracking-small);
}
.t-label {
  font-size: var(--brand-text-label);
  line-height: var(--brand-leading-label);
  font-weight: var(--brand-weight-semibold);
  letter-spacing: var(--brand-tracking-label);
  text-transform: uppercase;
  color: var(--brand-color-subtle);
}
.t-price {
  font-size: var(--brand-text-price);
  line-height: var(--brand-leading-price);
  font-weight: var(--brand-weight-semibold);
  letter-spacing: var(--brand-tracking-price);
  font-family: var(--brand-font-ui-family);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

h1, h2, h3 {
  font-family: var(--brand-font-ui-family);
  font-weight: var(--brand-weight-semibold);
}
h1 {
  font-size: var(--brand-text-h1);
  line-height: var(--brand-leading-h1);
  letter-spacing: var(--brand-tracking-h1);
}
h2 {
  font-size: var(--brand-text-h2);
  line-height: var(--brand-leading-h2);
  letter-spacing: var(--brand-tracking-h2);
}
h3 {
  font-size: var(--brand-text-h3);
  line-height: var(--brand-leading-h3);
  letter-spacing: var(--brand-tracking-h3);
}

:focus-visible {
  outline: var(--brand-focus-width) solid var(--brand-color-focus);
  outline-offset: var(--brand-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.brand-lockup {
  margin: 0 0 var(--brand-space-1);
  line-height: 0;
  font-size: 0;
}
.brand-lockup a,
.brand-lockup a:hover,
.brand-lockup a:focus,
.brand-lockup a:focus-visible {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.brand-lockup img {
  display: block;
  height: 40px;
  width: auto;
}