@import "tailwindcss";

/* ── Light theme (default) ── */
:root, [data-theme="light"] {
  --color-background: #ffffff;
  --color-background-secondary: #f5f5f5;
  --color-surface: #ffffff;
  --color-border: #e5e5e5;
  --color-text: #000000;
  --color-text-secondary: #525252;
  --color-text-tertiary: #a3a3a3;
  --color-accent: #000000;
  --color-accent-hover: #262626;
  --color-accent-dim: #f5f5f5;
  --color-terminal-bg: #0a0a0a;
  --color-terminal-text: #d4d4d4;
  --color-alpha-background: rgba(255, 255, 255, 0.92);
}

/* ── Dark theme via system preference ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #0a0a0a;
    --color-background-secondary: #141414;
    --color-surface: #171717;
    --color-border: #262626;
    --color-text: #ffffff;
    --color-text-secondary: #a3a3a3;
    --color-text-tertiary: #737373;
    --color-accent: #ffffff;
    --color-accent-hover: #d4d4d4;
    --color-accent-dim: #262626;
    --color-terminal-bg: #0a0a0a;
    --color-terminal-text: #d4d4d4;
    --color-alpha-background: rgba(10, 10, 10, 0.92);
  }
}

/* ── Dark theme via manual toggle ── */
[data-theme="dark"] {
  --color-background: #0a0a0a;
  --color-background-secondary: #141414;
  --color-surface: #171717;
  --color-border: #262626;
  --color-text: #ffffff;
  --color-text-secondary: #a3a3a3;
  --color-text-tertiary: #737373;
  --color-accent: #ffffff;
  --color-accent-hover: #d4d4d4;
  --color-accent-dim: #262626;
  --color-terminal-bg: #0a0a0a;
  --color-terminal-text: #d4d4d4;
  --color-alpha-background: rgba(10, 10, 10, 0.92);
}

body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  overflow: hidden;
}

code, pre, .font-mono {
  font-family: 'Geist Mono', ui-monospace, monospace;
}

/* ── Marquee ── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-track {
  animation: marquee 24s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* ── Terminal typing cursor ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

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

/* ── Terminal scroll ── */
@keyframes scroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* ── Logo switching ── */
.dark-hidden { display: inline; }
.light-hidden { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dark-hidden { display: none !important; }
  :root:not([data-theme="light"]) .light-hidden { display: inline !important; }
}
[data-theme="dark"] .dark-hidden { display: none !important; }
[data-theme="dark"] .light-hidden { display: inline !important; }
[data-theme="light"] .dark-hidden { display: inline !important; }
[data-theme="light"] .light-hidden { display: none !important; }

/* ── Dark mode invert override for marquee icons ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .invert { filter: none; }
}
[data-theme="dark"] .invert { filter: none !important; }

/* ── Hatch margin gutters (matches OpenLogs) ── */
.hatch-bg {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0,
    transparent 4px,
    color-mix(in oklch, var(--color-text) 6%, transparent) 4px,
    color-mix(in oklch, var(--color-text) 6%, transparent) 5px
  );
}


/* ── Package cell ── */
.pkg-cell {
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.pkg-cell:hover {
  opacity: 1;
  background-color: var(--color-background-secondary);
}

/* ── Spin ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Prose ── */
.prose h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--color-text); }
.prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; scroll-margin-top: 2rem; color: var(--color-text); }
.prose h3 { font-size: 1.125rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; scroll-margin-top: 2rem; color: var(--color-text); }
.prose p { font-size: 1rem; line-height: 1.75; margin-bottom: 1rem; color: var(--color-text-secondary); }
.prose strong { color: var(--color-text); }
.prose pre { overflow-x: auto; background-color: var(--color-background-secondary); border: 1px solid var(--color-border); padding: 1rem; margin-bottom: 1rem; font-size: 0.875rem; color: var(--color-text-secondary); }
.prose a { text-decoration: underline; }
.prose hr { border-color: var(--color-border); margin: 2.5rem 0; }
.prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; color: var(--color-text-secondary); }
.prose li { margin-bottom: 0.25rem; line-height: 1.75; }
.prose code:not(pre code) {
  background-color: var(--color-background-secondary);
  padding: 0.15em 0.35em;
  font-size: 0.875em;
  border-radius: 2px;
}

/* ── Selection ── */
::selection {
  background: var(--color-text);
  color: var(--color-background);
}
