/* ============================================================
   BRUTAL UI — Neo-brutalist landing page styles
   Tweakable tokens live on :root and are overwritten by JS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=Archivo+Black&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* --- tweakable --- */
  --accent: #FFE600;
  --accent-2: #FF3EA5;
  --accent-3: #4D5BFF;
  --accent-4: #00E5C0;
  --bw: 3px;            /* border width */
  --shadow: 7px;        /* hard shadow offset */
  --radius: 0px;        /* corner radius */

  /* --- theme (light default) --- */
  --bg: #F4F1E9;
  --bg-panel: #FFFFFF;
  --fg: #0A0A0A;
  --muted: #6B6B63;
  --line: #0A0A0A;

  --maxw: 1240px;
}

[data-theme="dark"] {
  --bg: #0E0E0C;
  --bg-panel: #1A1A17;
  --fg: #F4F1E9;
  --muted: #9C9C92;
  --line: #F4F1E9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .2s ease, color .2s ease;
  overflow-x: hidden;
}

.mono { font-family: 'Space Mono', ui-monospace, monospace; }
.black { font-family: 'Archivo Black', 'Archivo', sans-serif; font-weight: 900; }

::selection { background: var(--accent); color: #0A0A0A; }

a { color: inherit; }

/* ---- shared brutalist primitives ---- */
.shell {
  border: var(--bw) solid var(--line);
  background: var(--bg-panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow) var(--shadow) 0 0 var(--line);
}
.shell-flush { box-shadow: none; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- buttons ---- */
.btn {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .01em;
  padding: 13px 22px;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
  color: var(--fg);
  cursor: pointer;
  box-shadow: var(--shadow) var(--shadow) 0 0 var(--line);
  transition: transform .06s ease, box-shadow .06s ease, background .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: calc(var(--shadow) - 2px) calc(var(--shadow) - 2px) 0 0 var(--line); }
.btn:active { transform: translate(var(--shadow), var(--shadow)); box-shadow: 0 0 0 0 var(--line); }
.btn-accent { background: var(--accent); color: #0A0A0A; }
.btn-pink   { background: var(--accent-2); color: #0A0A0A; }
.btn-blue   { background: var(--accent-3); color: #fff; }
.btn-ghost  { box-shadow: none; }
.btn-sm { padding: 8px 14px; font-size: 13px; box-shadow: calc(var(--shadow) - 3px) calc(var(--shadow) - 3px) 0 0 var(--line); }
.btn-lg { padding: 17px 30px; font-size: 18px; }

/* ---- tags / chips ---- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: var(--bw) solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 22s linear infinite; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* focus ring for accessibility */
:focus-visible { outline: var(--bw) solid var(--accent-3); outline-offset: 3px; }
button:focus-visible, a:focus-visible { outline-offset: 3px; }

input, textarea, select, button { font-family: inherit; }