/* Generated by tools/gen-tokens.py from assets/design-tokens.json. Do not edit. */

:root {
  --dk-color-ink-50: #F1F2F7;
  --dk-color-ink-100: #E1E3EE;
  --dk-color-ink-200: #C3C7DA;
  --dk-color-ink-300: #9AA0BC;
  --dk-color-ink-400: #6B7088;
  --dk-color-ink-500: #4A4E62;
  --dk-color-ink-600: #34384F;
  --dk-color-ink-700: #232842;
  --dk-color-ink-800: #161A2E;
  --dk-color-ink-900: #14172A;
  --dk-color-ink-950: #0B0D18;
  --dk-color-ember-50: #FFF2EE;
  --dk-color-ember-100: #FFE0D6;
  --dk-color-ember-200: #FFBFAD;
  --dk-color-ember-300: #FF9A80;
  --dk-color-ember-400: #FF7A5A;
  --dk-color-ember-500: #FF5C38;
  --dk-color-ember-600: #E8431F;
  --dk-color-ember-700: #C13416;
  --dk-color-ember-800: #962914;
  --dk-color-ember-900: #6E2012;
  --dk-color-paper: #F6F5F1;
  --dk-color-white: #FFFFFF;
  --dk-color-black: #000000;
  --dk-color-red-600: #D12F25;
  --dk-color-red-300: #FF8A80;
  --dk-color-green-600: #177546;
  --dk-color-green-300: #5FD49A;
  --dk-spacing-1: 4px;
  --dk-spacing-2: 8px;
  --dk-spacing-3: 12px;
  --dk-spacing-4: 16px;
  --dk-spacing-5: 20px;
  --dk-spacing-6: 24px;
  --dk-spacing-8: 32px;
  --dk-radius-sm: 6px;
  --dk-radius-md: 10px;
  --dk-radius-lg: 16px;
  --dk-radius-full: 9999px;
  --dk-fontSize-caption: 11px;
  --dk-fontSize-callout: 12px;
  --dk-fontSize-body: 13px;
  --dk-fontSize-title: 22px;
  --dk-fontSize-display: 32px;
  --dk-fontFamily-brand: 'Be Vietnam Pro', system-ui, sans-serif;
  --dk-fontFamily-mono: ui-monospace, 'SF Mono', Consolas, monospace;

  --dk-color-brand: var(--dk-color-ink-700);
  --dk-color-accent: var(--dk-color-ember-500);
  --dk-color-accent-text: var(--dk-color-ember-700);
  --dk-color-on-accent: var(--dk-color-white);
  --dk-color-background: var(--dk-color-paper);
  --dk-color-surface: var(--dk-color-white);
  --dk-color-text: var(--dk-color-ink-700);
  --dk-color-text-secondary: var(--dk-color-ink-500);
  --dk-color-border: var(--dk-color-ink-100);
  --dk-color-mode-vi: var(--dk-color-ember-500);
  --dk-color-mode-en: var(--dk-color-ink-400);
  --dk-color-error: var(--dk-color-red-600);
  --dk-color-success: var(--dk-color-green-600);

  --dk-icon-keycap-face: var(--dk-color-ink-700);
  --dk-icon-keycap-edge: var(--dk-color-ink-800);
  --dk-icon-keycap-off-face: var(--dk-color-ink-400);
  --dk-icon-keycap-off-edge: var(--dk-color-ink-500);
  --dk-icon-glyph: var(--dk-color-white);
  --dk-icon-mark: var(--dk-color-ember-500);
  --dk-icon-template: var(--dk-color-black);
  --dk-settings-tint: var(--dk-color-accent);
  --dk-settings-heading: var(--dk-color-brand);
  --dk-settings-help-text: var(--dk-color-text-secondary);
  --dk-settings-error-text: var(--dk-color-error);
  --dk-settings-section-gap: var(--dk-spacing-3);
  --dk-settings-padding: var(--dk-spacing-5);
  --dk-settings-tab-inset: var(--dk-spacing-4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dk-color-brand: var(--dk-color-ink-100);
    --dk-color-accent: var(--dk-color-ember-500);
    --dk-color-accent-text: var(--dk-color-ember-400);
    --dk-color-on-accent: var(--dk-color-white);
    --dk-color-background: var(--dk-color-ink-900);
    --dk-color-surface: var(--dk-color-ink-800);
    --dk-color-text: var(--dk-color-ink-50);
    --dk-color-text-secondary: var(--dk-color-ink-300);
    --dk-color-border: var(--dk-color-ink-600);
    --dk-color-mode-vi: var(--dk-color-ember-500);
    --dk-color-mode-en: var(--dk-color-ink-300);
    --dk-color-error: var(--dk-color-red-300);
    --dk-color-success: var(--dk-color-green-300);
  }
}

:root[data-theme="dark"] {
  --dk-color-brand: var(--dk-color-ink-100);
  --dk-color-accent: var(--dk-color-ember-500);
  --dk-color-accent-text: var(--dk-color-ember-400);
  --dk-color-on-accent: var(--dk-color-white);
  --dk-color-background: var(--dk-color-ink-900);
  --dk-color-surface: var(--dk-color-ink-800);
  --dk-color-text: var(--dk-color-ink-50);
  --dk-color-text-secondary: var(--dk-color-ink-300);
  --dk-color-border: var(--dk-color-ink-600);
  --dk-color-mode-vi: var(--dk-color-ember-500);
  --dk-color-mode-en: var(--dk-color-ink-300);
  --dk-color-error: var(--dk-color-red-300);
  --dk-color-success: var(--dk-color-green-300);
}