/* Generated by tools/generate-design-tokens.py. Edit design/sumaya-design-tokens.json. */
:root {
  --sumaya-color-canvas: #F7F2EC;
  --sumaya-color-surface: #FFFDF9;
  --sumaya-color-ink: #252126;
  --sumaya-color-text-secondary: #625C62;
  --sumaya-color-on-dark: #FFFDF9;
  --sumaya-color-action: #252126;
  --sumaya-color-action-hover: #39343B;
  --sumaya-color-divider: #D8CEC4;
  --sumaya-color-control-border: #81777F;
  --sumaya-color-accent: #78475A;
  --sumaya-color-focus: #6A4762;
  --sumaya-color-focus-on-dark: #F7F2EC;
  --sumaya-color-success: #285B43;
  --sumaya-color-success-surface: #ECF3ED;
  --sumaya-color-warning: #785400;
  --sumaya-color-warning-surface: #FBF3DC;
  --sumaya-color-danger: #982E3C;
  --sumaya-color-danger-surface: #FCEEF0;
  --sumaya-font-brand: "Prata";
  --sumaya-font-ui: "Manrope";
  --sumaya-font-arabic: "NotoSansArabic";
  --sumaya-radius-photo: 0px;
  --sumaya-radius-control: 4px;
  --sumaya-radius-dialog: 8px;
  --sumaya-target-minimum: 48px;
  --sumaya-motion-press: 140ms;
  --sumaya-motion-panel: 200ms;
  --sumaya-motion-intro: 320ms;
  --sumaya-focus-width: 3px;
  --sumaya-focus-offset: 3px;
  --sumaya-space-4: 4px;
  --sumaya-space-8: 8px;
  --sumaya-space-12: 12px;
  --sumaya-space-16: 16px;
  --sumaya-space-24: 24px;
  --sumaya-space-32: 32px;
  --sumaya-space-48: 48px;
  --sumaya-space-64: 64px;
  --sumaya-space-96: 96px;
}