/* ---- Custom color tokens ---- */
:root {
  color-scheme: dark;
  --canvas: #160809;
  --surface: #110b0c;
  --surface-2: #16100e;
  --surface-hover: #1b1918;
  --surface-active: #211f1d;
  --border: var(--accent);
  --border-muted: color-mix(in srgb, var(--accent) 40%, transparent);
  --accent-subtle-hover: color-mix(in srgb, var(--accent) 12%, var(--canvas));
  --c-text: color-mix(in srgb, var(--accent) 25%, #f2ede8);
  --muted: color-mix(in srgb, var(--accent) 30%, #b8b0a8);
  --faint: color-mix(in srgb, var(--accent) 38%, #524c47);
  --danger: #f07878;
  --danger-hover: #e86060;
}

/* ---- Day theme (default = Sunday / Orange) ---- */
html {
  --accent: #fdba74;
  --accent-hover: #fed7aa;
  --accent-dim: #1e0c03;
  --accent-text: #0c0a08;
}

select,
option {
  background-color: var(--canvas) !important;
  color: var(--accent) !important;
}

html[data-day="mon"] {
  --accent: #ec94fa;
  --accent-hover: #f0abfc;
  --accent-dim: #1c0840;
  --accent-text: #0c0a08;
}

html[data-day="tue"] {
  --accent: #fda4af;
  --accent-hover: #fecdd3;
  --accent-dim: #2a061a;
  --accent-text: #0c0a08;
}

html[data-day="wed"] {
  --accent: #67e8f9;
  --accent-hover: #a5f3fc;
  --accent-dim: #011a1f;
  --accent-text: #0c0a08;
}

html[data-day="thu"] {
  --accent: #bef264;
  --accent-hover: #d9f99d;
  --accent-dim: #0d1a02;
  --accent-text: #0c0a08;
}

html[data-day="fri"] {
  --accent: #fcd34d;
  --accent-hover: #fde68a;
  --accent-dim: #1f1200;
  --accent-text: #0c0a08;
}

html[data-day="sat"] {
  --accent: #7dd3fc;
  --accent-hover: #bae6fd;
  --accent-dim: #021929;
  --accent-text: #0c0a08;
}

html[data-day="sun"] {
  --accent: #fdba74;
  --accent-hover: #fed7aa;
  --accent-dim: #1e0c03;
  --accent-text: #0c0a08;
}

/* ---- Banner ---- */
@keyframes banner-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---- Dialog spin-in ---- */
@keyframes dialog-spin-in {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }

  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

.animate-dialog-spin-in {
  animation: dialog-spin-in 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes overlay-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-overlay-fade-in {
  animation: overlay-fade-in 0.5s ease-out;
}

/* ---- Page fade-in ---- */
@keyframes page-fade-in {
  from {
    opacity: 0.12;
  }

  to {
    opacity: 1;
  }
}

.animate-page-fade-in {
  animation: page-fade-in 1.0s ease-out;
}

/* ---- Card flip (select → navigate) ---- */
@keyframes card-flip-out {
  0% {
    transform: perspective(1000px) rotateX(0deg);
    opacity: 1;
  }

  50% {
    transform: perspective(1000px) rotateX(75deg);
    opacity: 1;
  }

  100% {
    transform: perspective(1000px) rotateX(150deg);
    opacity: 0;
  }
}

.card-flipping {
  animation: card-flip-out 0.75s ease-in forwards;
  pointer-events: none;
}

/* ---- Page fade-out (paired with card flip) ---- */
@keyframes page-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.12;
  }
}

.page-fading-out {
  animation: page-fade-out 0.55s ease-in 0.2s forwards;
}

/* ---- Base ---- */
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background-color: var(--canvas);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

.banner-bg {
  position: fixed;
  top: 65px;
  left: 8px;
  right: 8px;
  border-radius: 0.375rem;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 8, 0.52);
}

.banner-img {
  display: block;
  width: 100%;
}

/* ---- Custom color utilities ---- */
.bg-canvas {
  background-color: var(--canvas);
}

.bg-surface {
  background-color: color-mix(in srgb, var(--surface) 60%, transparent) !important;
}

.bg-surface-2 {
  background-color: color-mix(in srgb, var(--surface-2) 78%, transparent) !important;
}

.bg-surface-hover {
  background-color: color-mix(in srgb, var(--surface-hover) 85%, transparent) !important;
}

.bg-surface-active {
  background-color: color-mix(in srgb, var(--surface-active) 85%, transparent) !important;
}

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

.bg-accent-dim {
  background-color: var(--accent-dim);
}

.bg-accent-subtle {
  background-color: color-mix(in srgb, var(--accent) 20%, var(--canvas));
}

.bg-danger {
  background-color: var(--danger);
}

.text-text {
  color: var(--c-text);
}

.text-muted {
  color: var(--muted);
}

.text-faint {
  color: var(--faint);
}

.text-accent {
  color: var(--accent);
}

.text-accent-text {
  color: var(--accent-text);
}

.text-canvas {
  color: var(--canvas);
}

.text-danger {
  color: var(--danger);
}

.border-border {
  border-color: var(--border);
}

.border-border-muted {
  border-color: var(--border-muted);
}

.border-accent {
  border-color: var(--accent);
}

#site-header {
  transition: background-color 0.3s, backdrop-filter 0.3s;
}

#site-header.header-scrolled {
  background-color: color-mix(in srgb, var(--canvas) 50%, transparent);
}

.ring-border {
  --tw-ring-color: var(--border);
}

.ring-accent {
  --tw-ring-color: var(--accent);
}

.focus\:ring-accent:focus {
  --tw-ring-color: var(--accent);
}

.placeholder-faint::placeholder {
  color: var(--faint);
}

.font-display {
  font-family: 'Raleway', system-ui, sans-serif;
}

/* ---- Page heading ---- */
.page-heading {
  font-size: 1rem;
  /* mobile */
  font-weight: 600;
  /* font-semibold */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

@media (min-width: 640px) {
  .page-heading {
    font-size: 1.25rem;
    /* text-xl */
  }
}

/* ---- Button base ---- */
.btn {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 6px 3rem 3rem 6px;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  width: 5rem;
  transition: background-color 0.15s, opacity 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover {
  background-color: var(--accent-dim);
}

@media (max-width: 639px) {
  .btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    width: 4.5rem;
  }
}

.scroll-btn {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  border-radius: 9999px;
  font-size: 0.875rem;
  transition: background-color 0.15s, opacity 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.scroll-btn:hover {
  background-color: var(--accent-dim);
}

/* ---- Hover variants ---- */
.hover\:bg-surface-hover:hover {
  background-color: var(--surface-hover) !important;
}

.hover\:bg-accent-dim:hover {
  background-color: var(--accent-dim);
}

.hover\:bg-accent-subtle:hover {
  background-color: color-mix(in srgb, var(--accent) 20%, var(--canvas));
}

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

.hover\:bg-accent-subtle-hover:hover {
  background-color: var(--accent-subtle-hover);
}

.hover\:bg-danger-hover:hover {
  background-color: var(--danger-hover);
}

.hover\:text-text:hover {
  color: var(--c-text);
}

.hover\:text-accent:hover {
  color: var(--accent);
}

/* group-hover */
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

/* ---- Card hover / flipping: text turns accent ---- */
[data-card-flip]:hover,
.card-flipping {
  color: var(--accent);
}

[data-card-flip]:hover .text-text,
[data-card-flip]:hover .text-muted,
.card-flipping .text-text,
.card-flipping .text-muted {
  color: var(--accent);
}

/* ---- Prose (Markdown) ---- */
.prose {
  --tw-prose-body: var(--c-text);
  --tw-prose-headings: var(--accent);
  --tw-prose-lead: var(--muted);
  --tw-prose-links: var(--accent);
  --tw-prose-bold: var(--c-text);
  --tw-prose-counters: var(--muted);
  --tw-prose-bullets: var(--faint);
  --tw-prose-hr: var(--border);
  --tw-prose-quotes: var(--muted);
  --tw-prose-quote-borders: var(--accent);
  --tw-prose-captions: var(--muted);
  --tw-prose-code: #f2c29a;
  --tw-prose-pre-code: var(--c-text);
  --tw-prose-pre-bg: transparent;
  --tw-prose-th-borders: var(--border);
  --tw-prose-td-borders: var(--border);
  color: var(--c-text) !important;
}

.prose :is(h1, h2, h3, h4, h5, h6) {
  color: var(--accent) !important;
}

.prose :is(p, li, td, dd) {
  color: var(--c-text) !important;
}

.prose a {
  color: var(--accent) !important;
}

.prose strong {
  color: var(--c-text) !important;
}

.prose code {
  color: #f2c29a !important;
}

.prose pre code {
  color: var(--c-text) !important;
}

.prose pre {
  background-color: var(--accent-subtle-hover) !important;
  border-radius: 4px;
  color-scheme: dark;
}

.prose thead th {
  color: var(--c-text) !important;
  background-color: transparent !important;
}

.prose hr {
  border-color: var(--border) !important;
}

.prose blockquote {
  color: var(--muted) !important;
  border-left-color: var(--accent) !important;
}

.prose code:not(pre code) {
  background-color: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.15em 0.4em;
  font-size: 0.85em;
}

.prose code:not(pre code)::before,
.prose code:not(pre code)::after {
  content: none;
}

.prose table {
  font-size: 0.875em;
}

.prose thead {
  border-bottom-color: var(--border);
}

.prose h1,
.prose h2 {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4em;
}

@media (max-width: 640px) {
  .prose h1 {
    font-size: 1.4rem;
  }

  .prose h2 {
    font-size: 1.15rem;
  }
}

.prose a {
  text-underline-offset: 3px;
}

/* Code block copy button */
.code-block-wrapper {
  position: relative;
}

.code-block-wrapper .copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--accent);
  background: transparent !important;
  color-scheme: normal;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.code-block-wrapper:hover .copy-btn {
  opacity: 1;
}

.code-block-wrapper .copy-btn:hover {
  color: var(--accent-hover);
}