/* Generated from design-system/tokens.json. Do not edit this file. */
:root {
  --f1-color-brand-primary: #51206d;
  --f1-color-brand-deep: #321342;
  --f1-color-brand-accent: #f5d738;
  --f1-color-text-primary: #24192d;
  --f1-color-text-secondary: #6c6272;
  --f1-color-surface-white: #ffffff;
  --f1-color-surface-paper: #f7f5f9;
  --f1-color-surface-selected: #eee7f3;
  --f1-color-surface-table: #eee8f2;
  --f1-color-border-subtle: #e6e1ea;
  --f1-color-border-field: #bfb2c7;
  --f1-color-focus: #6d2b88;
  --f1-color-danger: #9d2536;
  --f1-color-success: #245e44;
  --f1-color-success-legacy: #256b4b;
  --f1-color-error-surface: #fff1f2;
  --f1-color-error-border: #df9da7;
  --f1-color-error-text: #7b1828;
  --f1-color-notice-surface: #f8f1d4;
  --f1-color-notice-text: #58420d;
  --f1-color-region-surface: #f5eff7;
  --f1-font-family: 'Noto Sans Thai',sans-serif;
  --f1-font-body: 16px;
  --f1-font-reading: 17px;
  --f1-font-label: 14px;
  --f1-font-button: 15px;
  --f1-font-title: 23px;
  --f1-font-section: 32px;
  --f1-font-headline: 42px;
  --f1-font-body-leading: 1.7;
  --f1-font-reading-leading: 1.95;
  --f1-font-action-weight: 650;
  --f1-space-small: 8px;
  --f1-space-compact: 12px;
  --f1-space-medium: 16px;
  --f1-space-large: 24px;
  --f1-space-section-gap: 32px;
  --f1-space-wide: 40px;
  --f1-space-section-mobile: 44px;
  --f1-space-section: 68px;
  --f1-radius-badge: 5px;
  --f1-radius-control: 8px;
  --f1-radius-disclosure: 10px;
  --f1-radius-table: 12px;
  --f1-radius-surface: 14px;
  --f1-radius-image: 16px;
  --f1-size-control: 48px;
  --f1-size-icon-target: 44px;
  --f1-size-focus-width: 3px;
  --f1-size-focus-offset: 4px;
  --f1-layout-container: 1200px;
  --f1-layout-reading: 75ch;
  --f1-layout-directory-sidebar: 240px;
  --f1-shadow-navigation: 0 10px 30px #32134212;
  --f1-shadow-pack: 3px 8px 8px #32134218;
  --plum: var(--f1-color-brand-primary);
  --deep: var(--f1-color-brand-deep);
  --yellow: var(--f1-color-brand-accent);
  --ink: var(--f1-color-text-primary);
  --muted: var(--f1-color-text-secondary);
  --line: var(--f1-color-border-subtle);
  --paper: var(--f1-color-surface-paper);
  --green: var(--f1-color-success-legacy);
  --radius: var(--f1-radius-surface);
  --focus: var(--f1-color-focus);
  --danger: var(--f1-color-danger);
  --success: var(--f1-color-success);
  --shadow: var(--f1-shadow-navigation);
}