/* M8 Tyres: charcoal + red theme. Remaps the template's light tokens; loaded after the main CSS. */
:root { --m8-bg: 7 7 8; --m8-surface: 17 17 19; --m8-line: 38 38 43; --m8-ink: 240 240 242; --m8-muted: 168 168 176; }

body, .bg-background, .hover\:bg-background:hover { background-color: rgb(var(--m8-bg)); color: rgb(var(--m8-ink)); }
::-webkit-scrollbar-track { background: rgb(var(--m8-bg)); }
.from-background { --tw-gradient-from: rgb(var(--m8-bg)) var(--tw-gradient-from-position); --tw-gradient-to: rgb(var(--m8-bg) / 0) var(--tw-gradient-to-position); }
.to-background { --tw-gradient-to: rgb(var(--m8-bg)) var(--tw-gradient-to-position); }

.bg-surface { background-color: rgb(var(--m8-surface)); }
.from-surface { --tw-gradient-from: rgb(var(--m8-surface)) var(--tw-gradient-from-position); --tw-gradient-to: rgb(var(--m8-surface) / 0) var(--tw-gradient-to-position); }
.glass { background: rgb(var(--m8-surface) / .78); border-color: rgb(var(--theme-primary) / .22); }

.border-divider, .divide-divider > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--m8-line)); }
.bg-divider { background-color: rgb(var(--m8-line)); }
.bg-divider\/40 { background-color: rgb(var(--m8-line) / .4); }
.bg-divider\/50 { background-color: rgb(var(--m8-line) / .5); }
.border-ink\/15 { border-color: rgb(var(--m8-ink) / .15); }

.text-ink, .hover\:text-ink:hover, .\[\&_strong\]\:text-ink strong, .prose-template strong { color: rgb(var(--m8-ink)); }
.text-ink\/30 { color: rgb(var(--m8-ink) / .3); }
.text-ink\/75 { color: rgb(var(--m8-ink) / .75); }
.text-ink\/85 { color: rgb(var(--m8-ink) / .85); }
.text-muted, .prose-template p, .prose-template em { color: rgb(var(--m8-muted)); }
.text-muted\/70 { color: rgb(var(--m8-muted) / .7); }
.placeholder-muted\/50::placeholder { color: rgb(var(--m8-muted) / .6); }
.hover\:bg-ink:hover { background-color: rgb(var(--theme-primary)); }

/* white cards/panels -> raised dark; white buttons (bg-white + text-deep) stay white */
.bg-white:not(.text-deep), .bg-white\/95:not(.text-deep), .bg-white\/90:not(.text-deep), .bg-white\/70:not(.text-deep) { background-color: rgb(24 24 27); }
.bg-white\/95.border-white\/60, .bg-white\/90.border-white\/60 { border-color: rgb(var(--m8-line)); }
.text-primary-dark { color: rgb(240 74 76); }
.bg-white.text-deep .text-muted, .bg-white\/90.text-deep .text-muted, .bg-white\/95.text-deep .text-muted { color: rgb(91 101 119); }
.prose-template a, .\[\&_a\]\:text-primary-dark a { color: rgb(240 74 76); }

/* hero: marker font like the logo */
.hero-line-2 { font-family: 'Permanent Marker', cursive !important; font-style: normal; font-weight: 400; color: rgb(255 42 45);
  font-size: clamp(2.6rem, 8.5vw, 6.25rem); line-height: 1.08 !important; letter-spacing: .01em; text-shadow: 0 3px 14px rgba(0,0,0,.55); }
/* hero: darker photo */
section:has(.hero-line-2) img.object-center { filter: brightness(.45) saturate(.85); }