/* Second look: brass. Overrides the tokens from styles.css per data-design. The cartoon look is the base. */

:root[data-design="brass"] {
  --bg: #0B0D10;
  --bg-alt: #11151B;
  --surface: #171C24;
  --surface-2: #1F2630;
  --text: #ECEEF1;
  --text-muted: #A3ACB7;
  --border: rgba(244, 241, 234, 0.10);
  --border-strong: rgba(244, 241, 234, 0.24);
  --primary: #C9A15A;
  --primary-strong: #C9A15A;
  --on-primary: #0B0D10;
  --accent: #FF9F1C;
  --link: #E0C078;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.6);

  --diagram-node: #1F2630;
  --diagram-pill: #171C24;
  --diagram-line: #A3ACB7;
  --diagram-text: #ECEEF1;
  --diagram-muted: #A3ACB7;
  --diagram-band: rgba(201, 161, 90, 0.08);
  --diagram-band-stroke: rgba(201, 161, 90, 0.55);
  --diagram-accent: #C9A15A;
  --diagram-on-accent: #0B0D10;

  --sparkle: 255, 159, 28;
}

:root[data-design="brass"][data-theme="light"] {
  --bg: #F4F1EA;
  --bg-alt: #ECE7DD;
  --surface: #FFFDF8;
  --surface-2: #EFE9DD;
  --text: #14171C;
  --text-muted: #4F5761;
  --border: rgba(20, 23, 28, 0.12);
  --border-strong: rgba(20, 23, 28, 0.26);
  --primary: #8A6A2E;
  --primary-strong: #6E5322;
  --on-primary: #FFFDF8;
  --accent: #B35C00;
  --link: #6E5322;
  --shadow: 0 18px 50px rgba(20, 23, 28, 0.14);

  --diagram-node: #FFFDF8;
  --diagram-pill: #EFE9DD;
  --diagram-line: #4F5761;
  --diagram-text: #14171C;
  --diagram-muted: #4F5761;
  --diagram-band: rgba(138, 106, 46, 0.07);
  --diagram-band-stroke: rgba(138, 106, 46, 0.5);
  --diagram-accent: #8A6A2E;
  --diagram-on-accent: #FFFDF8;

  --sparkle: 179, 92, 0;
}

/* Paper texture on the dark brass body, a faint drafting grid on the light one */
:root[data-design="brass"] body { background-color: var(--bg); background-image: url("/assets/brass/grain.svg"); background-size: 400px 400px; }
:root[data-design="brass"][data-theme="light"] body {
  background-image: linear-gradient(rgba(20, 23, 28, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 23, 28, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
:root[data-design="brass"] .section-alt { background: var(--bg-alt); }
:root[data-design="brass"] h1, :root[data-design="brass"] h2 { letter-spacing: 0; }
:root[data-design="brass"] .btn, :root[data-design="brass"] .card, :root[data-design="brass"] .diagram-wrap, :root[data-design="brass"] .weights, :root[data-design="brass"] .harness-terms div { border-radius: 6px; }
:root[data-design="brass"] .btn-primary { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }

/* Elements that exist only in one look */
.only-brass { display: none !important; }
:root[data-design="brass"] .only-brass { display: block !important; }
:root[data-design="brass"] .only-cartoon { display: none !important; }

/* Brass hero: three layers with pointer parallax, a static image as the fallback */
.hero-brass { position: relative; aspect-ratio: 3 / 2; width: 100%; overflow: hidden; border-radius: 10px; }
.hero-brass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:root[data-design="brass"] .hero-figure img { animation: none; }
.hero-brass .layer { will-change: translate; transition: translate 120ms linear; scale: 1.04; }
:root[data-motion="off"] .hero-brass .layer { transition: none; }
.hero-brass .hero-static { display: none; }
.hero-brass.is-static .layer { display: none; }
.hero-brass.is-static .hero-static { display: block; }
.hero-brass { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .hero-figure img { animation: none; } }
:root[data-motion="off"] .hero-figure img, :root[data-motion="off"] .cat-overlay .callout circle { animation: none; }
:root[data-design="brass"] .hero-figure { width: 100%; max-width: none; filter: none; }
@media (min-width: 900px) { :root[data-design="brass"] .hero-grid { grid-template-columns: 1fr 1.1fr; } }

/* Card pictures (brass only) */
.card-media { margin: -28px -24px 18px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px 6px 0 0; background: var(--surface-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Cat section in brass: the cat on the gear */
.cat-brass { margin: 0; text-align: center; }
.cat-brass img { width: min(100%, 440px); height: auto; margin: 0 auto; }
.cat-brass figcaption { color: var(--text-muted); font-size: 0.95rem; padding-top: 8px; }

/* Team polaroids (brass only) */
.team-polaroids { gap: 20px; flex-wrap: wrap; margin: 1.5rem 0 0; padding: 0; list-style: none; }
:root[data-design="brass"] .team-polaroids { display: flex !important; }
.team-polaroids li { width: min(44%, 260px); }
.team-polaroids img { width: 100%; height: auto; rotate: -2deg; }
.team-polaroids li:last-child img { rotate: 2.5deg; }

/* Paw print easter egg near the footer (brass only) */
.paw { position: absolute; right: 24px; bottom: 8px; width: 72px; height: 72px; opacity: 0.6; pointer-events: none; }
.brand-mark-brass { display: inline-block; }
.site-footer { position: relative; }

/* Look panel */
.look-panel {
  position: fixed; top: 72px; z-index: 150; width: min(320px, calc(100vw - 2 * var(--gutter)));
  right: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
}
.look-panel[hidden] { display: none; }
.look-panel h2 { font-size: 1rem; margin: 0 0 12px; }
.look-row { display: grid; gap: 6px; margin-bottom: 14px; }
.look-row:last-child { margin-bottom: 0; }
.look-row > span { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
.segment { display: flex; gap: 6px; }
.segment button {
  flex: 1; min-height: 44px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer;
}
.segment button[aria-pressed="true"] { background: var(--primary-strong); color: var(--on-primary); border-color: transparent; }
.look-row input[type="range"] { width: 100%; accent-color: var(--primary); min-height: 44px; }
.look-value { font-variant-numeric: tabular-nums; }