/*
 * Doku Systems — Base styles + utilities
 * Loads after tokens.css. Sets element defaults and the kitsch utility patterns
 * (scanlines, dithering, stickers, marquee). See DESIGN.md for usage rules.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-mono);
}

/* ──────────────────────────────────────────────────────────────
 * Typography defaults
 * ────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-family: var(--font-pixel);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-lime);
}

h4 {
  font-family: var(--font-pixel);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-cyan);
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--max-w-prose);
  color: var(--color-text);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-magenta);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--color-link-hover);
  text-decoration-color: var(--color-lime);
}

small, .meta {
  font-family: var(--font-pixel);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-dim);
}

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-deep);
  border: var(--border-1) solid var(--color-border-dim);
  padding: 0.1em 0.3em;
  color: var(--color-lime);
}

pre {
  padding: var(--space-4);
  overflow-x: auto;
  box-shadow: var(--shadow-sticker-magenta);
}

hr {
  border: 0;
  border-top: var(--border-2) solid var(--color-border);
  margin: var(--space-12) 0;
}

::selection {
  background: var(--color-magenta);
  color: var(--color-bg);
}

/* ──────────────────────────────────────────────────────────────
 * Buttons
 * ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-pixel);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  text-decoration: none;
  background: var(--color-magenta);
  color: var(--color-bg);
  border: var(--border-2) solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sticker-lime);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-lift);
  background: var(--color-magenta-deep);
  color: var(--color-bg);
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-press);
}

.btn:focus-visible {
  outline: var(--border-2) dashed var(--color-lime);
  outline-offset: 4px;
}

.btn--lime    { background: var(--color-lime);    color: var(--color-bg); box-shadow: var(--shadow-sticker-magenta); }
.btn--cyan    { background: var(--color-cyan);    color: var(--color-bg); box-shadow: var(--shadow-sticker-magenta); }
.btn--ghost   { background: transparent;          color: var(--color-text); box-shadow: var(--shadow-sticker); }
.btn--ghost:hover { background: var(--color-bg-elev); color: var(--color-text); }

/* ──────────────────────────────────────────────────────────────
 * Cards / panels
 * ────────────────────────────────────────────────────────────── */

.panel {
  background: var(--color-bg-elev);
  border: var(--border-2) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  box-shadow: var(--shadow-sticker);
}

.panel--magenta { box-shadow: var(--shadow-sticker-magenta); border-color: var(--color-magenta); }
.panel--lime    { box-shadow: var(--shadow-sticker-lime);    border-color: var(--color-lime); }
.panel--cyan    { box-shadow: var(--shadow-sticker-cyan);    border-color: var(--color-cyan); }

/* ──────────────────────────────────────────────────────────────
 * Inputs
 * ────────────────────────────────────────────────────────────── */

input, textarea, select {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg-deep);
  border: var(--border-2) solid var(--color-border);
  border-radius: var(--radius-none);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

input::placeholder, textarea::placeholder { color: var(--color-text-faint); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-lime);
  box-shadow: var(--shadow-sticker-magenta);
}

/* ──────────────────────────────────────────────────────────────
 * Tags / chips
 * ────────────────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: var(--text-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  background: var(--color-bg-deep);
  color: var(--color-lime);
  border: var(--border-1) solid var(--color-lime);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}

.tag--magenta { color: var(--color-magenta); border-color: var(--color-magenta); }
.tag--cyan    { color: var(--color-cyan);    border-color: var(--color-cyan); }
.tag--orange  { color: var(--color-orange);  border-color: var(--color-orange); }
.tag--yellow  { color: var(--color-yellow);  border-color: var(--color-yellow); }

/* ──────────────────────────────────────────────────────────────
 * Layout helpers
 * ────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--max-w-page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.stack > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-12 > * + * { margin-top: var(--space-12); }

.row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* ──────────────────────────────────────────────────────────────
 * Kitsch utilities — use sparingly
 * ────────────────────────────────────────────────────────────── */

/* CRT scanlines overlay — apply to a wrapping element with position:relative */
.scanlines { position: relative; }
.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px,
    transparent 4px
  );
  z-index: 2;
}

/* Halftone dither dots */
.dither {
  background-color: var(--color-bg-elev);
  background-image: radial-gradient(var(--color-text-faint) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* Tilts for off-grid stickers */
.tilt-l { transform: rotate(-2deg); }
.tilt-r { transform: rotate(2deg); }
.tilt-l-hard { transform: rotate(-4deg); }
.tilt-r-hard { transform: rotate(4deg); }

/* Marquee — infinite horizontal scroll */
.marquee {
  display: flex;
  overflow: hidden;
  border-top: var(--border-2) solid var(--color-border);
  border-bottom: var(--border-2) solid var(--color-border);
  background: var(--color-lime);
  color: var(--color-bg);
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-8);
  padding: var(--space-3) 0;
  padding-right: var(--space-8);
  animation: marquee 30s linear infinite;
  font-family: var(--font-pixel);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__track span::before { content: "★"; margin-right: var(--space-3); color: var(--color-magenta); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Grid background for graph-paper feel */
.graph-bg {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(var(--color-border-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-dim) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Focus ring for keyboard navigation */
:focus-visible {
  outline: var(--border-2) dashed var(--color-lime);
  outline-offset: 3px;
}