:root {
  --tf-night: #12102A;
  --tf-paper: #FAFAFC;
  --tf-white: #FFFFFF;
  --tf-slate: #4A4860;
  --tf-mist: #C9C6DD;
  --tf-line: #E6E4F0;
  --tf-violet: #6C4CF5;    --tf-violet-hover: #5A3BE0;    --tf-violet-active: #4B2FC9;    --tf-violet-300: #A996FF;    --tf-ember: #FF6A3D;    --tf-ember-hover: #FF8A63;    --tf-ember-text: #B93A12;    --tf-gradient: linear-gradient(135deg, #6C4CF5 0%, #FF6A3D 100%);
  --tf-gradient-line: linear-gradient(90deg, #6C4CF5, #FF6A3D);
  --tf-glow: radial-gradient(60% 60% at 75% 50%, rgba(108,76,245,.35), rgba(108,76,245,0));
  --tf-focus-ring: 0 0 0 2px var(--tf-paper), 0 0 0 4px var(--tf-violet);
  --tf-focus-ring-dark: 0 0 0 2px var(--tf-night), 0 0 0 4px var(--tf-violet-300);
    --accent: var(--tf-violet);
}