/* ============================================================
   Taste Suite — themes (loaded on every page, after styles.css)
   1. The floating Paper / Brutal switch (both themes)
   2. BRUTAL: dark neo-brutalism — near-black, hard 3px borders,
      zero radius, solid offset shadows, acid lime / safety orange /
      hot pink. Aimed at streetwear, type and merch designers.
   ============================================================ */

/* ---------- 1. Theme switch ---------- */

.theme-switch {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  display: flex;
  padding: 4px;
  gap: 4px;
  background: var(--text);
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
  font-family: var(--sans);
}
.theme-switch button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--bg);
  opacity: 0.7;
}
.theme-switch button:hover { opacity: 1; }
.theme-switch button[aria-pressed="true"] { background: var(--bg); color: var(--text); opacity: 1; }

/* ---------- 2. BRUTAL tokens ---------- */

:root[data-theme="brutal"] {
  --bg: #0e0e0e;
  --bg-raised: #171717;
  --page: #0e0e0e;
  --line: #3a3a3a;
  --text: #f3f0e7;
  --muted: #a9a59b;
  --accent: #c8ff00;          /* acid lime */
  --on-accent: #0e0e0e;
  --yellow: #c8ff00;          /* stripe 1 */
  --salmon: #ff5b1f;          /* stripe 2: safety orange */
  --sky: #ff3ea5;             /* stripe 3: hot pink */
  --navy: #141414;
  --danger: #ff5b1f;
  --radius: 0px;
  --edge: 3px solid var(--text);
  --hard: 6px 6px 0 var(--text);
  --hard-lime: 8px 8px 0 var(--accent);
  color-scheme: dark;
}

[data-theme="brutal"] body { background: var(--bg); }
[data-theme="brutal"] ::selection { background: var(--accent); color: var(--on-accent); }
[data-theme="brutal"] .theme-switch { border-radius: 0; border: var(--edge); background: var(--bg); box-shadow: 4px 4px 0 var(--accent); }
[data-theme="brutal"] .theme-switch button { border-radius: 0; color: var(--text); }
[data-theme="brutal"] .theme-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* ---------- shared components (all pages) ---------- */

[data-theme="brutal"] .btn,
[data-theme="brutal"] .chip,
[data-theme="brutal"] .tag,
[data-theme="brutal"] .nav-cta {
  border-radius: 0 !important;
}
[data-theme="brutal"] .btn {
  border: var(--edge);
  box-shadow: 4px 4px 0 var(--text);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s;
}
[data-theme="brutal"] .btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--text); }
[data-theme="brutal"] .btn:active { transform: translate(4px, 4px); box-shadow: none; }
[data-theme="brutal"] .btn-primary { background: var(--accent); color: var(--on-accent); }
[data-theme="brutal"] .btn-primary:hover { background: var(--accent); color: var(--on-accent); }
[data-theme="brutal"] .btn-ghost { background: var(--bg); color: var(--text); }
[data-theme="brutal"] .btn-ghost:hover { color: var(--text); border-color: var(--text); background: var(--salmon); }

[data-theme="brutal"] .masthead { border-bottom: var(--edge); }
[data-theme="brutal"] .wordmark::before { background: var(--accent); border-radius: 0; }
[data-theme="brutal"] .nav-cta { border: var(--edge); background: var(--accent); color: var(--on-accent) !important; box-shadow: 3px 3px 0 var(--text); }

[data-theme="brutal"] input[type="text"],
[data-theme="brutal"] input[type="url"],
[data-theme="brutal"] input[type="email"],
[data-theme="brutal"] input[type="search"],
[data-theme="brutal"] textarea,
[data-theme="brutal"] select {
  background: #151515;
  color: var(--text);
  border: 2px solid var(--text);
  border-radius: 0;
}
[data-theme="brutal"] input:focus,
[data-theme="brutal"] textarea:focus,
[data-theme="brutal"] select:focus { border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent); }

[data-theme="brutal"] .request-aside,
[data-theme="brutal"] .output-panel,
[data-theme="brutal"] .preview-panel,
[data-theme="brutal"] .draft-banner,
[data-theme="brutal"] .mini-card {
  border: var(--edge);
  border-radius: 0;
  background: var(--bg-raised);
  box-shadow: var(--hard);
}

[data-theme="brutal"] .entry-file .btn-primary { background: var(--entry-accent, var(--accent)); color: #0e0e0e; }
[data-theme="brutal"] .stat-value { color: var(--entry-accent, var(--accent)); }
[data-theme="brutal"] .footer { border-top: var(--edge); }

/* ---------- landing page ---------- */

[data-theme="brutal"] .home {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(243, 240, 231, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 240, 231, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
}
[data-theme="brutal"] .frame {
  border-radius: 0;
  border: var(--edge);
  box-shadow: 12px 12px 0 var(--accent);
  background: var(--bg);
}

[data-theme="brutal"] .rings { color: #262626; }
[data-theme="brutal"] .rings ellipse { stroke-dasharray: 6 10; }

[data-theme="brutal"] .hero-nav { border-bottom: var(--edge); margin: 0 calc(-1 * clamp(18px, 5vw, 80px)); padding-left: clamp(18px, 5vw, 80px); padding-right: clamp(18px, 5vw, 80px); background: var(--bg); position: relative; z-index: 4; }
[data-theme="brutal"] .hero-nav .wordmark { text-transform: uppercase; letter-spacing: 0.02em; }
[data-theme="brutal"] .hero-links a { text-transform: uppercase; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.06em; }
[data-theme="brutal"] .hero-links a::after { height: 3px; background: var(--accent); }
[data-theme="brutal"] .round-btn {
  border-radius: 0;
  background: var(--accent);
  color: var(--on-accent);
  border: var(--edge);
  box-shadow: 4px 4px 0 var(--text);
}
[data-theme="brutal"] .round-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--text); color: var(--on-accent); }

[data-theme="brutal"] .pill {
  border-radius: 0;
  border: var(--edge);
  background: var(--bg);
  box-shadow: 4px 4px 0 var(--salmon);
  font-family: var(--mono);
  font-weight: 500;
}
[data-theme="brutal"] .pill-dot { border-radius: 0; background: var(--accent); animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

[data-theme="brutal"] .mega {
  color: var(--text);
  text-shadow: 0.035em 0.035em 0 var(--salmon);
}
[data-theme="brutal"] .inline-pic { border-radius: 0; border-color: var(--accent); background: var(--accent); }
[data-theme="brutal"] .inline-pic img { filter: grayscale(1) contrast(1.25); }
[data-theme="brutal"] .mega:hover .inline-pic img { filter: none; }
[data-theme="brutal"] .hero-sub { background: var(--bg); border-radius: 0; color: var(--muted); }

[data-theme="brutal"] .tile img {
  border-radius: 0;
  border: var(--edge);
  box-shadow: none;
}
[data-theme="brutal"] .tile-plate { border-radius: 0; inset: 10px -10px -10px 10px; border: var(--edge); }
[data-theme="brutal"] .tile-a .tile-plate { background: var(--salmon); }
[data-theme="brutal"] .tile-b .tile-plate { background: var(--accent); }
[data-theme="brutal"] .tile-c .tile-plate { background: var(--sky); }
[data-theme="brutal"] .tile figcaption { border-radius: 0; background: var(--accent); color: var(--on-accent); border: 2px solid var(--bg); text-transform: uppercase; }

[data-theme="brutal"] .squiggle { stroke: var(--accent); stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; }

[data-theme="brutal"] .sticker {
  background: var(--salmon);
  /* 16-point starburst */
  clip-path: polygon(50% 0, 59% 15%, 75% 7%, 75% 25%, 93% 25%, 85% 41%, 100% 50%, 85% 59%, 93% 75%, 75% 75%, 75% 93%, 59% 85%, 50% 100%, 41% 85%, 25% 93%, 25% 75%, 7% 75%, 15% 59%, 0 50%, 15% 41%, 7% 25%, 25% 25%, 25% 7%, 41% 15%);
  rotate: 12deg;
}
[data-theme="brutal"] .sticker span { color: #0e0e0e; font-size: clamp(0.66rem, 1vw, 1rem); }

[data-theme="brutal"] .hero-quote p { font-family: var(--mono); font-size: clamp(0.85rem, 1.05vw, 1rem); }
[data-theme="brutal"] .hero-quote { border-left: 6px solid var(--accent); padding-left: 16px; text-align: left; }

[data-theme="brutal"] .stat-slab {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0;
  border: var(--edge);
  border-bottom: 0;
}
[data-theme="brutal"] .stat-slab:hover { color: var(--on-accent); }
[data-theme="brutal"] .stat-slab-num { color: var(--on-accent); }
[data-theme="brutal"] .swatches i { border-radius: 0; border: 2px solid var(--text); margin-left: 4px; }
[data-theme="brutal"] .text-link { color: var(--accent); border-color: var(--accent); }
[data-theme="brutal"] .text-link:hover { color: var(--salmon); border-color: var(--salmon); }

/* ribbons become hazard tape */
[data-theme="brutal"] .ribbons { border-top: var(--edge); border-bottom: var(--edge); margin: 0; background: var(--bg); }
[data-theme="brutal"] .ribbon { border-top: var(--edge); border-bottom: var(--edge); }
[data-theme="brutal"] .ribbon-blue { background: var(--accent); color: var(--on-accent); }
[data-theme="brutal"] .ribbon-yellow { background: var(--sky); color: #0e0e0e; }
[data-theme="brutal"] .ribbon span::after { content: "■"; color: #0e0e0e; font-size: 0.5em; }
[data-theme="brutal"] .ribbon-yellow span::after { color: #0e0e0e; }

/* dark bento → hard grid */
[data-theme="brutal"] .night {
  margin: 0;
  border-radius: 0;
  background:
    linear-gradient(rgba(243, 240, 231, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(243, 240, 231, 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    #121212;
  border-bottom: var(--edge);
  color: var(--text);
}
[data-theme="brutal"] .night-glow { display: none; }
[data-theme="brutal"] .night .eyebrow,
[data-theme="brutal"] .eyebrow { color: var(--accent); }
[data-theme="brutal"] .eyebrow::before { content: "[ "; }
[data-theme="brutal"] .eyebrow::after { content: " ]"; }
[data-theme="brutal"] .night-sub { color: var(--muted); }
[data-theme="brutal"] .display-2 { text-shadow: 0.04em 0.04em 0 var(--sky); }

[data-theme="brutal"] .shot { border-radius: 0; border: var(--edge); box-shadow: var(--hard); background: #1b1b1b; transition: transform 0.15s, box-shadow 0.15s; }
[data-theme="brutal"] .shot:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--accent); }
[data-theme="brutal"] .shot figcaption { border-radius: 0; background: #0e0e0e; backdrop-filter: none; -webkit-backdrop-filter: none; border: 2px solid var(--text); font-family: var(--mono); }
[data-theme="brutal"] .shot figcaption b { color: var(--accent); }

[data-theme="brutal"] .numcard { border-radius: 0; border: var(--edge); box-shadow: var(--hard); color: #0e0e0e; }
[data-theme="brutal"] .numcard-blue { background: var(--accent); }
[data-theme="brutal"] .numcard-salmon { background: var(--salmon); }
[data-theme="brutal"] .numcard-yellow { background: var(--sky); color: #0e0e0e; }

[data-theme="brutal"] .home .sample-card {
  background: var(--bg);
  color: var(--text);
  border: var(--edge);
  border-top: 14px solid var(--entry-accent, var(--accent));
  border-radius: 0;
  box-shadow: 10px 10px 0 var(--entry-accent, var(--accent));
}
[data-theme="brutal"] .home .sample-card::before { color: var(--entry-accent, var(--accent)); opacity: 0.9; content: "↘"; font-size: 5rem; top: 10px; }
[data-theme="brutal"] .home .sample-card .card-discipline { color: var(--entry-accent, var(--accent)); opacity: 1; }
[data-theme="brutal"] .home .sample-essence { color: var(--text); }
[data-theme="brutal"] .home .sample-card .stat-row { border-color: var(--line); }
[data-theme="brutal"] .home .sample-card .stat-value { color: var(--entry-accent, var(--accent)); }
[data-theme="brutal"] .home .sample-card .btn-primary { background: var(--entry-accent, var(--accent)); border: var(--edge); color: #0e0e0e; border-radius: 0; }
[data-theme="brutal"] .home .sample-card .btn-ghost { border: var(--edge); color: var(--text); border-radius: 0; }
[data-theme="brutal"] .home .sample-card .btn-ghost:hover { background: var(--text); color: #0e0e0e; }

/* how it works */
[data-theme="brutal"] .track-step {
  background: var(--bg-raised);
  border: var(--edge);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--chip);
}
[data-theme="brutal"] .track-step:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--chip); }
[data-theme="brutal"] .track-step:nth-child(1) { --chip: var(--accent) !important; }
[data-theme="brutal"] .track-step:nth-child(2) { --chip: var(--salmon) !important; }
[data-theme="brutal"] .track-step:nth-child(3) { --chip: var(--sky) !important; }
[data-theme="brutal"] .track-step:nth-child(4) { --chip: #8f7bff !important; }
[data-theme="brutal"] .track-num { color: var(--chip); }
[data-theme="brutal"] .chip-icon { border-radius: 0; border: 2px solid var(--text); }
[data-theme="brutal"] .chip-icon svg { stroke: #0e0e0e; stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }

[data-theme="brutal"] .anatomy-h {
  background: var(--accent);
  color: #0e0e0e;
  border-radius: 0;
  border: var(--edge);
  box-shadow: 10px 10px 0 var(--text);
}
[data-theme="brutal"] .anatomy-h .chip-icon { background: #0e0e0e !important; border-color: #0e0e0e; }
[data-theme="brutal"] .anatomy-h .chip-icon svg { stroke: var(--accent); }
[data-theme="brutal"] .features dd { color: #26300a; }

/* directory */
[data-theme="brutal"] .home .search-wrap input { border-radius: 0; background: #151515; border: var(--edge); }
[data-theme="brutal"] .home .chip { border: 2px solid var(--text); color: var(--text); font-family: var(--mono); }
[data-theme="brutal"] .home .chip:hover { background: var(--salmon); color: #0e0e0e; }
[data-theme="brutal"] .home .chip.active { background: var(--accent); color: #0e0e0e; }
[data-theme="brutal"] .home .card {
  background: var(--bg-raised);
  border: var(--edge);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--entry-accent, var(--accent));
}
[data-theme="brutal"] .home .card:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--entry-accent, var(--accent)); }
[data-theme="brutal"] .home .card-discipline { color: var(--entry-accent, var(--accent)); opacity: 1; }
[data-theme="brutal"] .home .card-index { color: var(--muted); opacity: 1; }
[data-theme="brutal"] .home .tag { border: 2px solid var(--line); color: var(--text); }
[data-theme="brutal"] .home .card-filed { background: var(--entry-accent, var(--accent)); color: #0e0e0e; border-radius: 0; border: 2px solid var(--text); }

/* finale */
[data-theme="brutal"] .finale {
  margin: clamp(64px, 8vw, 120px) clamp(18px, 5vw, 80px) 0;
  background: var(--salmon);
  color: #0e0e0e;
  border-radius: 0;
  border: var(--edge);
  box-shadow: 14px 14px 0 var(--text);
}
[data-theme="brutal"] .finale-title { color: #0e0e0e; text-shadow: 0.04em 0.04em 0 var(--accent); }
[data-theme="brutal"] .finale-sub { color: #1d0d05; }
[data-theme="brutal"] .finale-tile-l .tile-plate { background: var(--accent); }
[data-theme="brutal"] .finale-tile-r .tile-plate { background: var(--sky); }
[data-theme="brutal"] .btn-pill {
  border-radius: 0;
  background: #0e0e0e;
  color: var(--accent);
  border: var(--edge);
  box-shadow: 6px 6px 0 var(--accent);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
[data-theme="brutal"] .btn-pill:hover { background: #0e0e0e; color: var(--accent); transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--accent); }
[data-theme="brutal"] .home .footer { border-top: var(--edge); margin-top: clamp(48px, 6vw, 90px); }

@media (max-width: 820px) {
  [data-theme="brutal"] .frame { box-shadow: 6px 6px 0 var(--accent); }
  [data-theme="brutal"] .hero-quote { text-align: left; }
  [data-theme="brutal"] .finale { margin-left: 12px; margin-right: 12px; box-shadow: 8px 8px 0 var(--text); }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="brutal"] .pill-dot { animation: none; }
}