/**
 * brand.css — Dwight Spencer / denzuko / zekodun
 * Canonical design tokens ONLY — no resets, no body rules.
 * Import this before any site stylesheet. It exports CSS custom properties
 * and utility classes only. It does NOT reset margins, padding, or body styles.
 *
 * Source of truth: data/brand.yaml in denzuko/stream-assets
 */

:root {
  /* Core palette */
  --cream:      #fffdfa;
  --ink:        #111111;
  --dark:       #0d0d0b;

  /* Infrastructure / monitoring signals — off-air context only */
  --green:      #39ff14;
  --amber:      #ffab00;
  --red:        #ff1744;
  --text-dark:  #d1fae5;

  /* Rules */
  --rule:       rgba(17,17,17,.2);
  --rule-dark:  rgba(209,250,229,.08);
  --muted:      rgba(17,17,17,.55);

  /* Typography */
  --font-mono:  'Share Tech Mono', 'Courier New', monospace;
  --font-sans:  'Bricolage Grotesque', system-ui, sans-serif;

  /* Spacing scale */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   48px;

  /* Mark rotation */
  --mark-rotation: -25deg;
}

/* Dark mode token overrides — custom properties only, no element rules */
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #0d0d0b;
    --ink:   #d1fae5;
    --rule:  rgba(209,250,229,.12);
  }
}

[data-theme="dark"] {
  --cream: #0d0d0b;
  --ink:   #d1fae5;
  --rule:  rgba(209,250,229,.12);
}

/* ── Utility classes ─────────────────────────────────────────────────────── */

/* Dotted rule — site structural element */
.rule {
  border: none;
  border-top: 1px dotted currentColor;
  opacity: .2;
  width: 100%;
}
.rule--centered { width: 38%; }
.rule--short    { width: 20%; }

/* Blinking cursor */
.cursor {
  display: inline-block;
  width: .52em;
  height: .78em;
  background: currentColor;
  margin-left: .06em;
  vertical-align: -.08em;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Eye/lens mark dark mode invert */
.eyemark { display: block; }
@media (prefers-color-scheme: dark) {
  .eyemark { filter: invert(1); }
}
[data-theme="dark"] .eyemark { filter: invert(1); }

/* Ticker */
.ticker {
  overflow: hidden;
  white-space: nowrap;
}
.ticker__inner {
  display: inline-block;
  animation: ticker 28s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

/* Utility */
.muted      { opacity: .55; }
.very-muted { opacity: .2; }
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .45;
}

/* Ping dot — monitoring indicator */
.dot {
  border-radius: 50%;
  animation: ping 2.5s ease-out infinite;
}
@keyframes ping {
  0%   { opacity: .9; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(4); }
  100% { opacity: 0;  }
}

/* ─── Theme: dark ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --cream:      #0d0d0b;
  --ink:        #d1fae5;
  --rule:       rgba(209,250,229,.12);
}

/* Scene-specific dark overrides */
[data-theme="dark"] .scene--light {
  background: #0d0d0b;
}
[data-theme="dark"] .scene--light .cursor {
  background: #d1fae5;
}
[data-theme="dark"] hr {
  border-top-color: rgba(209,250,229,.12);
}

/* Scene-specific light overrides (explicit, default) */
[data-theme="light"] .scene--dark {
  background: #fffdfa;
}
[data-theme="light"] .scene--dark .topbar {
  background: rgba(255,253,250,.95);
  border-bottom-color: rgba(17,17,17,.12);
  color: rgba(17,17,17,.55);
}
[data-theme="light"] .scene--dark .ticker {
  background: rgba(255,253,250,.95);
  border-top-color: rgba(17,17,17,.12);
}
[data-theme="light"] .scene--dark .ticker__inner {
  color: rgba(17,17,17,.45);
}
[data-theme="light"] .scene--dark .dot {
  /* Monitoring dots stay coloured regardless of theme */
}

/* Gallery index dark mode */
[data-theme="dark"] body {
  background: #0d0d0b;
  color: #d1fae5;
}
[data-theme="dark"] .header,
[data-theme="dark"] .footer {
  border-color: rgba(209,250,229,.12);
  color: #d1fae5;
}
[data-theme="dark"] .card {
  background: #111;
  border-color: rgba(209,250,250,.12);
}
[data-theme="dark"] .card:hover {
  border-color: #d1fae5;
}
[data-theme="dark"] .card-meta {
  border-top-color: rgba(209,250,229,.1);
}
[data-theme="dark"] .card-name,
[data-theme="dark"] .card-btn,
[data-theme="dark"] .header-title,
[data-theme="dark"] .header-handle,
[data-theme="dark"] .header-rebuild {
  color: #d1fae5;
  border-color: rgba(209,250,229,.2);
}
[data-theme="dark"] .card-preview--light {
  background: #1a1a18;
}