@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Courier+Prime:wght@400;700&display=swap");

[data-theme="zine-halftone"] {
  --font-sans: "Courier Prime", "Courier New", monospace;
  --font-display: "Archivo Black", Impact, sans-serif;
  --font-button: "Archivo Black", Impact, sans-serif;
  --font-mono: "Courier Prime", monospace;
  --radius: 0;
  --border-width: 2px;
  --border-style: solid;
  --shadow: 5px 5px 0 #0a0a0a;
  --button-shadow: 4px 4px 0 #0a0a0a;
  --button-secondary-shadow: 3px 3px 0 #444444;
  --input-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  --heading-transform: uppercase;
  --heading-letter-spacing: 0.05em;
  --logo-transform: uppercase;
  --button-transform: uppercase;
  --button-letter-spacing: 0.06em;
  --body-letter-spacing: 0.025em;
  --bg: #b8b5ae;
  --surface: #d4d0c8;
  --surface-2: #c4c0b8;
  --text: #0a0a0a;
  --muted: #333333;
  --border: #0a0a0a;
  --link: #b91c1c;
  --accent: #e11d48;
  --button-text: #d4d0c8;
  --button-border: #0a0a0a;
  --input-bg: #ddd9d1;
  --danger: #b91c1c;
  --danger-bg: #e8d4d4;
  --success: #1d4ed8;
  --success-bg: #d4dce8;
  --warning: #0a0a0a;
  --warning-bg: #c4c0b8;
  --bg-texture:
    url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1.5' cy='1.5' r='1.1' fill='%230a0a0a' fill-opacity='.22'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  --bg-texture-size: 6px 6px, 140px 140px;
  --bg-blend-mode: multiply, overlay;
  --surface-texture: url("data:image/svg+xml,%3Csvg width='5' height='5' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1.2' cy='1.2' r='0.9' fill='%230a0a0a' fill-opacity='.16'/%3E%3C/svg%3E");
  --surface-texture-size: 5px 5px;
  --overlay-opacity: 0.55;
  --overlay-texture: url("data:image/svg+xml,%3Csvg width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2.5' cy='2.5' r='2' fill='%23000' fill-opacity='.08'/%3E%3C/svg%3E");
  --overlay-size: 10px 10px;
  --overlay-blend: multiply;
  --card-tilt-a: rotate(-0.6deg);
  --card-tilt-b: rotate(0.5deg);
  --card-hover-transform: translate(-3px, -3px);
  --button-hover-transform: translate(-2px, -2px);
  --button-hover-filter: none;
}

[data-theme="zine-halftone"] .site-header {
  --header-logo: #d4d0c8;
  --header-link: #0a0a0a;
  --header-link-active: #0a0a0a;
  --dropdown-bg: #eceae6;
  --dropdown-text: #0a0a0a;
  --dropdown-hover-bg: #ddd9d1;
  background: #d4d0c8;
  border-bottom-width: 4px;
  box-shadow: inset 0 -10px 0 rgba(10, 10, 10, 0.08);
}

[data-theme="zine-halftone"] .logo {
  color: #d4d0c8;
  background: #e11d48;
  padding: 0.15rem 0.45rem;
  box-shadow: 3px 3px 0 #0a0a0a;
}

[data-theme="zine-halftone"] .nav-badge {
  background: #0a0a0a;
  color: #d4d0c8;
}

[data-theme="zine-halftone"] .button {
  background: #0a0a0a;
}

[data-theme="zine-halftone"] .button.secondary {
  background: #d4d0c8;
  color: #0a0a0a;
  border-color: #0a0a0a;
}

[data-theme="zine-halftone"] .book-card,
[data-theme="zine-halftone"] .panel,
[data-theme="zine-halftone"] .auth-card {
  background-color: #d4d0c8;
  background-image: var(--surface-texture);
  border-width: 2px;
  border-color: #0a0a0a;
}

[data-theme="zine-halftone"] h1,
[data-theme="zine-halftone"] .hero h1 {
  color: #0a0a0a;
  background: linear-gradient(180deg, #0a0a0a 42%, transparent 42%);
  background-size: 100% 0.38em;
  background-repeat: repeat-x;
  background-position: 0 0.88em;
}

[data-theme="zine-halftone"] main a:not(.nav-dropdown-item):hover {
  background: #e11d48;
  color: #d4d0c8;
  text-decoration: none;
  box-shadow: 2px 2px 0 #0a0a0a;
}

[data-theme="zine-halftone"] .site-footer {
  border-top-width: 3px;
}