:root {
  color-scheme: light;

  --lj-color-beige: #f7ebd6;
  --lj-color-yellow: #ffd100;
  --lj-color-acorn: #2e7d32;
  --lj-color-leaf: #009540;
  --lj-color-heart: #e10600;
  --lj-color-cherry: var(--lj-color-heart);
  --lj-color-black: #111111;
  --lj-color-gray: #6b6b6b;
  --lj-color-background: #fffdf8;
  --lj-color-surface: #f7ebd6;
  --lj-color-surface-elevated: #fffaf0;
  --lj-color-border: #111111;
  --lj-color-text: #111111;
  --lj-color-text-secondary: #6b6b6b;
  --lj-color-primary: #ffd100;
  --lj-color-primary-hover: #edc200;
  --lj-color-success: #2e7d32;
  --lj-color-danger: #e10600;
  --lj-color-table: #216f38;
  --lj-color-table-dark: #16572c;

  /* Compatibility aliases for the existing component markup. */
  --lj-bg: var(--lj-color-beige);
  --lj-surface: var(--lj-color-background);
  --lj-surface-raised: var(--lj-color-surface-elevated);
  --lj-surface-warm: var(--lj-color-beige);
  --lj-primary: var(--lj-color-yellow);
  --lj-primary-band: var(--lj-color-primary-hover);
  --lj-ink: var(--lj-color-black);
  --lj-muted: var(--lj-color-gray);
  --lj-line: #d8cbb8;
  --lj-line-strong: var(--lj-color-black);
  --lj-schellen: var(--lj-color-yellow);
  --lj-eichel: var(--lj-color-acorn);
  --lj-blatt: var(--lj-color-leaf);
  --lj-herz: var(--lj-color-heart);
  --lj-danger: var(--lj-color-danger);
  --lj-success: var(--lj-color-success);
  --lj-info: #245d8c;
  --lj-disabled-bg: #e9dfcf;
  --lj-disabled-text: var(--lj-color-gray);
  --lj-table: var(--lj-color-table);
  --lj-table-dark: var(--lj-color-table-dark);

  --lj-space-1: 4px;
  --lj-space-2: 8px;
  --lj-space-3: 12px;
  --lj-space-4: 16px;
  --lj-space-6: 24px;
  --lj-space-8: 32px;
  --lj-space-12: 48px;
  --lj-space-16: 64px;

  --lj-radius-sm: 8px;
  --lj-radius-md: 12px;
  --lj-radius-lg: 16px;
  --lj-radius-xl: 24px;
  --lj-radius-control: var(--lj-radius-sm);
  --lj-radius-button: var(--lj-radius-md);
  --lj-radius-card: var(--lj-radius-lg);
  --lj-radius-panel: var(--lj-radius-lg);
  --lj-border-width: 2px;
  --lj-border-color: var(--lj-color-black);
  --lj-shadow-sm: 0 2px 6px rgb(17 17 17 / 8%);
  --lj-shadow-md: 0 6px 18px rgb(17 17 17 / 10%);
  --lj-shadow-card: var(--lj-shadow-sm);
  --lj-shadow-table: var(--lj-shadow-md);
  --lj-focus-ring: 0 0 0 3px rgb(0 149 64 / 28%);

  --lj-font: Inter, Arial, sans-serif;
  --lj-font-heading: Inter, Arial, sans-serif;
  --lj-h1-size: 32px;
  --lj-h1-line: 40px;
  --lj-h2-size: 24px;
  --lj-h2-line: 32px;
  --lj-h3-size: 20px;
  --lj-h3-line: 28px;
  --lj-body-size: 16px;
  --lj-body-line: 24px;
  --lj-caption-size: 12px;
  --lj-caption-line: 16px;
  --lj-button-size: 16px;
  --lj-button-line: 24px;
}