/* design tokens */

:root {
  --color-bg: #0a0a0f;
  --color-bg-light: #151522;
  --color-text: #f0f0ff;
  --color-text-muted: #a0a0c0;
  --color-accent: #00d4ff;
  --color-accent-2: #ff2a6d;
  --color-accent-3: #05d9e8;
  --font-family: 'Vazirmatn', sans-serif;
  --transition-normal: 0.25s ease-out;
  --border-radius-lg: 8px;
  --element-size: 70px;
  --element-size-mobile: 35px;
  --element-size-mobile-small: 28px;
  
  --element-size-desktop: 68px;
  --element-gap-desktop: 4px;
  --font-size-symbol-desktop: 1.2rem;
  --font-size-name-desktop: 0.55rem;
  --font-size-atomic-desktop: 0.7rem;
  --border-radius-element-desktop: 8px;
}

/* light theme */
body.light-theme {
  --color-bg: #f5f7fc;
  --color-bg-light: #ffffff;
  --color-text: #1a1a2e;
  --color-text-muted: #6c6c8a;
  --color-accent: #0066cc;
  --color-accent-2: #e63946;
  --color-accent-3: #0099ff;
}