/* ds4-buttons.css — Canonical DS4 button family + per-Studio sponsor accent system.
   Pete Schieck / Build-a-Concert / 2026-04-25 — Universal DS4 UI Swap (first wave).

   Source-of-truth extracted from BAC/ShowServe/web/prototype/styles.css.
   Drop-in stylesheet: load AFTER your existing styles, or scope under a class
   if you want gradual adoption. Tokens + variants + states + Studio-tinted
   chrome — all CSS, no JS dependency.

   Aesthetic anchor: nighttime festival in the forest (rustic-dark theme variant).
   Adobe Garamond Pro display, gold + teal accents, dark substrate.

   Usage:
     <link rel="stylesheet" href="css/ds4-buttons.css">
     ...
     <button class="ds4-button">Click</button>
     <button class="ds4-button ds4-button-primary">Save</button>
     <button class="ds4-button ds4-button-ghost">Cancel</button>
     <button class="ds4-button ds4-button-destructive">Delete</button>
     <button class="ds4-button ds4-button-icon" aria-label="Settings">⚙</button>

   Per-Studio accent: set on a parent element, all child buttons inherit.
     <main data-studio="audio"> ... <button class="ds4-button">...</button> ... </main>
*/

/* ─── Token registry ──────────────────────────────────────────────────── */
:root {
  /* Platform-wide tokens — same across Studios */
  --bg:           #1A1A1A;
  --bg-elevated:  #222222;
  --bg-deep:      #0F0F0F;
  --border:       #2A2A2A;
  --border-strong:#3A3A3A;
  --ink:          #E8E0CC;
  --ink-muted:    #888888;
  --ink-strong:   #FFFFFF;

  /* Universal accents */
  --gold:      #D4AF37;
  --teal:      #2A9D8F;
  --estop-red: #E04848;

  /* Studio sponsor accent — set per Studio via [data-studio] selectors below */
  --studio-accent:     #D4AF37;
  --studio-glow:       rgba(212, 175, 55, 0.45);
  --studio-bevel-tint: rgba(212, 175, 55, 0.08);

  /* Brightness budget multiplier (per-indicator scale, set by JS when applicable) */
  --brightness-mult: 1.0;

  /* Typography */
  --font-display: "Adobe Garamond Pro", Garamond, Georgia, serif;
  --font-body:    "Adobe Garamond Pro", Garamond, Georgia, serif;
  --font-mono:    "JetBrains Mono", Consolas, monospace;
}

/* ─── Per-Studio sponsor accents ──────────────────────────────────────── */
[data-studio="audio"]    { --studio-accent: #B07AA1; --studio-glow: rgba(176, 122, 161, 0.45); --studio-bevel-tint: rgba(176, 122, 161, 0.08); }
[data-studio="video"]    { --studio-accent: #4E79A7; --studio-glow: rgba( 78, 121, 167, 0.45); --studio-bevel-tint: rgba( 78, 121, 167, 0.08); }
[data-studio="image"]    { --studio-accent: #E15759; --studio-glow: rgba(225,  87,  89, 0.45); --studio-bevel-tint: rgba(225,  87,  89, 0.08); }
[data-studio="hardware"] { --studio-accent: #F28E2B; --studio-glow: rgba(242, 142,  43, 0.45); --studio-bevel-tint: rgba(242, 142,  43, 0.08); }
[data-studio="3d"]       { --studio-accent: #7FA84F; --studio-glow: rgba(127, 168,  79, 0.45); --studio-bevel-tint: rgba(127, 168,  79, 0.08); }
[data-studio="notes"]    { --studio-accent: #76B7B2; --studio-glow: rgba(118, 183, 178, 0.45); --studio-bevel-tint: rgba(118, 183, 178, 0.08); }
[data-studio="server"]   { --studio-accent: #59A14F; --studio-glow: rgba( 89, 161,  79, 0.45); --studio-bevel-tint: rgba( 89, 161,  79, 0.08); }

/* Server Studio = futuristic-dark exception (cleaner, less rustic) */
[data-studio="server"] {
  --bg: #15191D;
  --bg-elevated: #1B2026;
  --border: #2A3138;
}

/* ─── DS4 buttons — matte-glossy 3D bevel ─────────────────────────────── */
.ds4-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, #2E2E2E 0%, #1F1F1F 100%);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-top-color: var(--studio-bevel-tint);
  border-radius: 3px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-decoration: none;
  user-select: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.3);
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out, transform 80ms ease-out;
}

.ds4-button:hover {
  border-color: var(--studio-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 8px var(--studio-glow);
}

.ds4-button:focus-visible {
  outline: 2px solid var(--studio-accent);
  outline-offset: 2px;
}

.ds4-button:active {
  transform: translateY(1px);
}

.ds4-button:disabled,
.ds4-button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Variant: primary (gold) — CTA / Drop-it / Save ── */
.ds4-button-primary {
  background: linear-gradient(180deg, var(--gold) 0%, #A88820 100%);
  color: #1A1A1A;
  border-color: #6B5510;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 4px 8px rgba(0, 0, 0, 0.5);
}
.ds4-button-primary:hover {
  border-color: #5A480E;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 12px var(--studio-glow);
}

/* ── Variant: ghost (transparent) — secondary / cancel ── */
.ds4-button-ghost {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--border-strong);
  box-shadow: none;
}
.ds4-button-ghost:hover {
  color: var(--ink);
  border-color: var(--studio-accent);
  background: var(--studio-bevel-tint);
}

/* ── Variant: destructive (e-stop red) — never Studio-tinted ── */
.ds4-button-destructive {
  background: linear-gradient(180deg, #2E1818 0%, #1F1010 100%);
  color: var(--estop-red);
  border-color: var(--estop-red);
}
.ds4-button-destructive:hover {
  background: linear-gradient(180deg, #401818 0%, #2A1010 100%);
  border-color: #FF6868;
  box-shadow: 0 0 10px rgba(224, 72, 72, 0.45);
}
.ds4-button-destructive:focus-visible {
  outline-color: var(--estop-red);
}

/* ── Variant: icon-only (square) ── */
.ds4-button-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 14px;
}
.ds4-button-icon.ds4-button-sm {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

/* ── Size modifiers ── */
.ds4-button-sm { padding: 3px 8px; font-size: 11px; }
.ds4-button-lg { padding: 10px 22px; font-size: 15px; }

/* ── Group (button bar) ── */
.ds4-button-group {
  display: inline-flex;
  gap: 4px;
}
.ds4-button-group .ds4-button {
  border-radius: 0;
}
.ds4-button-group .ds4-button:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.ds4-button-group .ds4-button:last-child  { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.ds4-button-group .ds4-button + .ds4-button { margin-left: -1px; }

/* ─── Tool-button (compact variant for tool blocks / Bar 3) ──────────── */
.tool-button {
  background: linear-gradient(180deg, #2E2E2E 0%, #1F1F1F 100%);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-top-color: var(--studio-bevel-tint);
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 11px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 120ms ease-out;
}
.tool-button:hover {
  border-color: var(--studio-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 8px var(--studio-glow);
}
.tool-button:active { transform: translateY(1px); }

/* ─── Legacy alias bridge (eases swap of vendor button classes) ─────── */
/* Allows progressive migration: existing markup keeps working as you
   swap class names file-by-file. Remove these aliases once the swap is
   complete (search-and-replace on the full repo). */
.btn:not([class*="ds4-button"]):not([class*="tool-button"]) {
  /* Apply DS4 default to bare .btn until explicitly upgraded */
  display: inline-flex;
  align-items: center;
  background: linear-gradient(180deg, #2E2E2E 0%, #1F1F1F 100%);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--studio-accent); }