/* Lexemeo design tokens — the single source of visual primitives. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Material Symbols Rounded";
  src: url("../fonts/MaterialSymbolsRounded-Lexemeo.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: block;
}

:root {
  color-scheme: light;

  --lx-ink: #1b2030;
  --lx-indigo: #4a5a8f;
  --lx-indigo-light: #aeb8da;
  --lx-paper: #f4f5f7;
  --lx-surface: #ffffff;
  --lx-surface-alt: #fafbfc;
  --lx-text: #1b2030;
  --lx-text-body: #2c3348;
  --lx-text-secondary: #4a4f5e;
  --lx-text-muted: #5b5f6e;
  --lx-text-icon: #6c7185;
  --lx-placeholder: #8a8fa0;
  --lx-line: #e3e5ea;
  --lx-line-strong: #dadde4;
  --lx-border-input: #c3c9da;

  --lx-sage: #3f7a5c;
  --lx-sage-tint: #eef4f0;
  --lx-sage-border: #c7dcd1;
  --lx-clay: #a85d3e;
  --lx-ochre: #9a7b24;
  --lx-ochre-border: #d8c79a;
  --lx-rust: #8a2f2f;
  --lx-rust-tint: #faf1f1;
  --lx-rust-border: #e2c6c6;

  --lx-focus: rgb(74 90 143 / 12%);
  --lx-overlay: rgb(27 32 48 / 32%);
  --lx-link-underline: rgb(74 90 143 / 35%);
  --lx-shadow-dialog: 0 12px 32px rgb(27 32 48 / 7%);

  --lx-font: "Hanken Grotesk", system-ui, sans-serif;
  --lx-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --lx-font-icon: "Material Symbols Rounded";

  --lx-radius-sm: 3px;
  --lx-radius: 4px;
  --lx-radius-lg: 5px;
  --lx-radius-icon: 22px;

  --lx-page-max: 1000px;
  --lx-reading-max: 700px;
  --lx-practice-max: 640px;
  --lx-form-max: 380px;
  --lx-tap-target: 44px;
}