/* Webrozum design tokens: a copy of design/system/tokens.css (generated from tokens.json), without the @font-face (fonts.css). */


:root, [data-theme="light"] {
  --paper-0: #FFFFFF;
  --paper-50: #F7F6F1;
  --paper-100: #EFEDE6;
  --paper-200: #E4E1D7;
  --paper-300: #D3CFC3;
  --paper-500: #8A8678;
  --slate-300: #A9B6C1;
  --slate-500: #5F6A74;
  --slate-600: #4E5A66;
  --navy-50: #EDF2F6;
  --navy-100: #D9E4EC;
  --navy-200: #B3C8D8;
  --navy-300: #86A6BF;
  --navy-400: #5682A3;
  --navy-500: #2C6690;
  --navy-600: #1D4F73;
  --navy-700: #163E5B;
  --navy-800: #14324A;
  --navy-900: #12293B;
  --green-50: #EFF6EA;
  --green-100: #DDEDD2;
  --green-200: #BFDDAA;
  --green-300: #9DCA7E;
  --green-400: #7DB85A;
  --green-500: #5A9A37;
  --green-600: #4A8030;
  --green-700: #3A6A24;
  --green-800: #2B5019;
  --amber-50: #FBF1DC;
  --amber-700: #8A5A00;
  --red-50: #FBECE8;
  --red-600: #A63A2B;
  --code-ink: #E9EDF0;
  --code-comment: #9DAEBD;
  --code-string: #E3CB8F;
  --surface: var(--paper-50);
  --surface-alt: var(--paper-100);
  --surface-raised: var(--paper-0);
  --surface-sunken: var(--paper-200);
  --surface-inverse: var(--navy-900);
  --ink: var(--navy-900);
  --ink-muted: var(--slate-600);
  --ink-subtle: var(--slate-500);
  --ink-inverse: var(--paper-50);
  --ink-inverse-muted: var(--slate-300);
  --brand: var(--navy-600);
  --brand-leaf: var(--green-500);
  --brand-leaf-on-dark: var(--green-400);
  --action: var(--navy-600);
  --action-hover: var(--navy-700);
  --on-action: var(--paper-0);
  --link: var(--navy-600);
  --link-hover: var(--navy-900);
  --accent: var(--green-500);
  --accent-strong: var(--green-600);
  --accent-text: var(--green-700);
  --focus-ring: var(--green-600);
  --focus-ring-on-dark: var(--green-400);
  --border: var(--paper-300);
  --border-strong: var(--paper-500);
  --selection: var(--green-100);
  --success: var(--green-700);
  --success-tint: var(--green-50);
  --warning: var(--amber-700);
  --warning-tint: var(--amber-50);
  --danger: var(--red-600);
  --danger-tint: var(--red-50);
  --code-bg: var(--navy-900);
  --code-keyword: var(--green-400);
}

:root {
  --font-display: Commissioner, "Segoe UI", system-ui, sans-serif;
  --font-text: Literata, Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

.display { font-family: var(--font-display); font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-display); font-size: 44px; line-height: 52px; font-weight: 600; letter-spacing: -0.015em; }
.h2 { font-family: var(--font-display); font-size: 35px; line-height: 42px; font-weight: 600; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 600; }
.h4 { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; }
.lead { font-family: var(--font-text); font-size: 22px; line-height: 34px; font-weight: 400; }
.body { font-family: var(--font-text); font-size: 18px; line-height: 30px; font-weight: 400; }
.body-sm { font-family: var(--font-text); font-size: 16px; line-height: 26px; font-weight: 400; }
.ui { font-family: var(--font-display); font-size: 16px; line-height: 24px; font-weight: 400; }
.label { font-family: var(--font-display); font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: 0.005em; }
.caption { font-family: var(--font-display); font-size: 14px; line-height: 20px; font-weight: 400; }
.overline { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; }
.code { font-family: var(--font-mono); font-size: 15px; line-height: 24px; font-weight: 400; }
.code-sm { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }

/* Not expressible in tokens.json: Flair on display and h1, overline casing. */
.display, .h1 { font-variation-settings: "FLAR" 100; }
.overline { text-transform: uppercase; color: var(--accent-text); }