/* Generated by site/build.mjs from dist/tokens.css — do not edit by hand.
   Run `npm run build && node site/build.mjs` after changing design-system/tokens.json. */

/* Generated from design-system/tokens.json — do not edit by hand. */

:root, [data-theme="light"] {
  --surface-000: #f2f5f7;
  --surface-100: #ffffff;
  --surface-200: #e6ecef;
  --surface-300: #d8e1e6;
  --ink-900: #0d1215;
  --ink-600: #4b5762;
  --ink-400: #5f6c79;
  --on-ink: #f2f5f7;
  --accent-600: #0f5e6b;
  --accent-ink: #0b525e;
  --accent-100: #dcedf0;
  --on-accent: #f2fafb;
  --metric-hydration: #0f6aa8;
  --metric-sebum: #8a6410;
  --metric-keratin: #6f6250;
  --metric-pores: #6b4e8f;
  --metric-spots: #b03a22;
  --metric-wrinkles: #5d6b2f;
  --metric-impurities: #48575f;
  --metric-sensitivity: #a83a72;
  --score-track: #dde4e9;
  --success-600: #0d6b5b;
  --success-100: #d7eee9;
  --on-success: #f2fbf8;
  --danger-600: #a6362a;
  --danger-100: #f7e3e0;
  --on-danger: #fff5f3;
  --warning-600: #8a5a10;
  --warning-100: #f5e9d4;
  --line-100: #dde4e9;
  --line-200: #c2ccd4;
  --line-control: #77828b;
  --focus-ring: #0f6d7d;
  --scrim: #0d1215a6;
  --overlay-line: #eef3f6;
  --overlay-active: #6fdcef;
  --shadow-raised: 0 1px 2px 0 #0d121514;
  --shadow-sheet: 0 -8px 32px -12px #0d121526;
}

[data-theme="dark"] {
  --surface-000: #0d1114;
  --surface-100: #161c21;
  --surface-200: #1e262c;
  --surface-300: #27323a;
  --ink-900: #eef3f6;
  --ink-600: #9fadb8;
  --ink-400: #7d8b97;
  --on-ink: #0d1114;
  --accent-600: #6fdcef;
  --accent-ink: #7ce4f5;
  --accent-100: #10313a;
  --on-accent: #04191d;
  --metric-hydration: #5cb3ee;
  --metric-sebum: #d7a33c;
  --metric-keratin: #c3b39a;
  --metric-pores: #b39ae0;
  --metric-spots: #f0866a;
  --metric-wrinkles: #a8bd63;
  --metric-impurities: #93a4ad;
  --metric-sensitivity: #ef8ec0;
  --score-track: #242d34;
  --success-600: #3fcbae;
  --success-100: #082b26;
  --on-success: #04221c;
  --danger-600: #ff9583;
  --danger-100: #341210;
  --on-danger: #2b0703;
  --warning-600: #e0a83c;
  --warning-100: #302209;
  --line-100: #242d34;
  --line-200: #37434c;
  --line-control: #69757e;
  --focus-ring: #6fdcef;
  --scrim: #000000cc;
  --overlay-line: #eef3f6;
  --overlay-active: #6fdcef;
  --shadow-raised: 0 1px 2px 0 #00000066;
  --shadow-sheet: 0 -8px 32px -12px #00000099;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-round: 999px;
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --control-icon: 24px;
  --control-thumb: 28px;
  --border-hairline: 1px;
  --border-focus: 2px;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

.display-l { font-family: var(--font-sans); font-size: 34px; line-height: 36px; font-weight: 300; letter-spacing: -0.02em; }
.display-m { font-family: var(--font-sans); font-size: 26px; line-height: 30px; font-weight: 300; letter-spacing: -0.018em; }
.title { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; }
.subtitle { font-family: var(--font-sans); font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -0.005em; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; }
.label-strong { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.005em; }
.meta { font-family: var(--font-mono); font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: 0.12em; }
.reading-xl { font-family: var(--font-mono); font-size: 40px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; }
.reading-l { font-family: var(--font-mono); font-size: 28px; line-height: 30px; font-weight: 500; letter-spacing: -0.015em; }
.reading-s { font-family: var(--font-mono); font-size: 15px; line-height: 18px; font-weight: 500; }
.numeral { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400; }


/* Derived from the block above: the site follows the operating system unless a page pins
   data-theme="light". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-000: #0d1114;
    --surface-100: #161c21;
    --surface-200: #1e262c;
    --surface-300: #27323a;
    --ink-900: #eef3f6;
    --ink-600: #9fadb8;
    --ink-400: #7d8b97;
    --on-ink: #0d1114;
    --accent-600: #6fdcef;
    --accent-ink: #7ce4f5;
    --accent-100: #10313a;
    --on-accent: #04191d;
    --metric-hydration: #5cb3ee;
    --metric-sebum: #d7a33c;
    --metric-keratin: #c3b39a;
    --metric-pores: #b39ae0;
    --metric-spots: #f0866a;
    --metric-wrinkles: #a8bd63;
    --metric-impurities: #93a4ad;
    --metric-sensitivity: #ef8ec0;
    --score-track: #242d34;
    --success-600: #3fcbae;
    --success-100: #082b26;
    --on-success: #04221c;
    --danger-600: #ff9583;
    --danger-100: #341210;
    --on-danger: #2b0703;
    --warning-600: #e0a83c;
    --warning-100: #302209;
    --line-100: #242d34;
    --line-200: #37434c;
    --line-control: #69757e;
    --focus-ring: #6fdcef;
    --scrim: #000000cc;
    --overlay-line: #eef3f6;
    --overlay-active: #6fdcef;
    --shadow-raised: 0 1px 2px 0 #00000066;
    --shadow-sheet: 0 -8px 32px -12px #00000099;
  }
}