[data-theme="tfm"] {
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --color-accent: #c2410c;
  --color-accent-hover: #ea580c;
}

html[data-theme="tfm"] {
  scroll-behavior: smooth;
}

html[data-theme="tfm"] body {
  font-family: var(--font-body);
  color: #1c1917;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fafaf9;
}

html[data-theme="tfm"] ::selection {
  color: #fff;
  background-color: #c2410c;
}

html[data-theme="tfm"] a {
  transition: color .2s;
}

.font-display { font-family: var(--font-display); }
.font-mono { font-family: 'JetBrains Mono', monospace; }

.text-accent { color: var(--color-accent); }
.text-accent-hover { color: var(--color-accent-hover); }
.bg-accent { background-color: var(--color-accent); }
.bg-accent-hover { background-color: var(--color-accent-hover); }
.border-accent { border-color: var(--color-accent); }

.hover\:bg-accent\/90:hover { background-color: color-mix(in srgb, var(--color-accent) 90%, transparent); }
.hover\:bg-accent-hover:hover { background-color: var(--color-accent-hover); }
.hover\:text-accent:hover { color: var(--color-accent); }
.hover\:text-accent-hover:hover { color: var(--color-accent-hover); }
.hover\:border-accent:hover { border-color: var(--color-accent); }

.group:hover .group-hover\:text-accent { color: var(--color-accent); }
.group:hover .group-hover\:text-accent-hover { color: var(--color-accent-hover); }
.group:hover .group-hover\:translate-x-1 { translate: 4px 0; }
.group:hover .group-hover\:scale-\[1\.02\] { scale: 1.02; }
.group:hover .group-hover\:rotate-6 { rotate: 6deg; }

.cursor.active {
  animation: 1s step-end infinite blink;
}

@keyframes blink {
  0%, to { opacity: 1; }
  50% { opacity: 0; }
}

.focus\:not-sr-only:focus {
  clip-path: none;
  white-space: normal;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  position: static;
  overflow: visible;
}
.focus\:absolute:focus { position: absolute; }
.focus\:top-4:focus { top: 16px; }
.focus\:left-4:focus { left: 16px; }
.focus\:z-50:focus { z-index: 50; }
.focus\:rounded:focus { border-radius: .25rem; }
.focus\:bg-accent:focus { background-color: var(--color-accent); }
.focus\:px-4:focus { padding-left: 16px; padding-right: 16px; }
.focus\:py-2:focus { padding-top: 8px; padding-bottom: 8px; }
.focus\:text-white:focus { color: #fff; }