/*
 * Ledger design tokens. Taken from the Vanguard portfolio site's style.css and
 * documented in ../DESIGN.md, which the phone's Compose theme is built from.
 * Change a value here and in DESIGN.md together.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
}

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --color-ground: #f5f6f7;
  --color-surface: #ffffff;
  --color-sunken: #fafbfc;
  --color-well: #f1f3f5;
  --color-hover: #e9ecf0;
  --color-selected: #e5e9ef;

  /* Ink */
  --color-ink: #202329;
  --color-ink-strong: #1f2530;
  --color-ink-soft: #38404c;
  --color-muted: #737982;
  --color-faint: #9298a1;
  --color-ghost: #b9bfc8;

  /* Rules */
  --color-line: #e4e6e9;
  --color-line-soft: #edf0f3;
  --color-line-strong: #dce0e5;

  /* Meaning */
  --color-accent: #3564db;
  --color-gain: #217252;
  --color-loss: #bc3542;
  --color-caution: #a77a3f;
  --color-gain-wash: #f4f8f5;
  --color-loss-wash: #f8eeef;
  --color-caution-wash: #faf7f1;
  --color-info-wash: #f6f8fa;

  /* The one dark button */
  --color-primary: #242933;
  --color-primary-hover: #3b424e;
  --color-on-primary: #ffffff;

  --color-brand: #af2636;
  --color-focus: #3564db;
  --color-scrim: rgb(20 32 52 / 33%);
  --shadow-raised: 0 5px 20px rgb(25 43 67 / 9%);
  --shadow-dialog: 0 24px 90px rgb(24 36 56 / 15%);

  /* Chart series, in order of use */
  --series-1: #3564db;
  --series-2: #829bbb;
  --series-3: #b5a899;
  --series-4: #528d71;
  --series-5: #bc4f5b;
  --chart-grid: #e8eaed;
  --chart-label: #777e89;
  --chart-guide: #b3b8c1;

  /* Type */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', Arial, Helvetica, sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 27px;
  --text-metric: clamp(23px, 2.5vw, 32px);
  --text-display: 38px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-tight: 1.17;
  --leading-snug: 1.4;
  --leading-body: 1.5;
  --leading-loose: 1.7;
  --tracking-display: -1.3px;
  --tracking-figure: -1px;
  --tracking-label: 1.2px;

  /* Space: a 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-15: 60px;

  /* Shape */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --radius-xl: 7px;
  --radius-round: 50%;
  --rule: 1px;

  /* Layout */
  --sidebar-width: 226px;
  --utility-height: 82px;
  --control-height: 40px;
}

/*
 * Dark. Applied when the reader picks Dark, or picks System and the device
 * prefers dark; src/theme.js resolves that choice to this attribute before
 * first paint. Light is the default.
 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-ground: #14171b;
  --color-surface: #1a1e23;
  --color-sunken: #1f242a;
  --color-well: #23292f;
  --color-hover: #262c33;
  --color-selected: #2b323a;
  --color-ink: #e5e7ea;
  --color-ink-strong: #f2f3f5;
  --color-ink-soft: #c9cdd3;
  --color-muted: #9aa1ab;
  --color-faint: #7c838d;
  --color-ghost: #59606a;
  --color-line: #2b3138;
  --color-line-soft: #252b31;
  --color-line-strong: #353c44;
  --color-accent: #7d9cf0;
  --color-gain: #5cb88c;
  --color-loss: #e0707b;
  --color-caution: #d6a768;
  --color-gain-wash: #1b2a23;
  --color-loss-wash: #2e1d20;
  --color-caution-wash: #2b241a;
  --color-info-wash: #1f252c;
  --color-primary: #e5e7ea;
  --color-primary-hover: #ffffff;
  --color-on-primary: #14171b;
  --color-brand: #c8424f;
  --color-focus: #7d9cf0;
  --color-scrim: rgb(0 0 0 / 55%);
  --shadow-raised: 0 5px 20px rgb(0 0 0 / 35%);
  --shadow-dialog: 0 24px 90px rgb(0 0 0 / 50%);
  --series-1: #7d9cf0;
  --series-2: #8ea3bf;
  --series-3: #c2b4a3;
  --series-4: #5cb88c;
  --series-5: #e0707b;
  --chart-grid: #2b3138;
  --chart-label: #8d949e;
  --chart-guide: #59606a;
}