/* ===========================================================================
   DimeClip — SHARED COMPONENT PRIMITIVES. One definition each.

   Linked on every page immediately after tokens.css. tokens.css unified the
   palette; this file unifies the layer above it, where the same drift was
   still running: the card and the primary button were each defined twice, in
   sheets that no single page loads together, so which one you got depended
   on which page family you were on.

   THE BUTTON WAS THE WORSE OF THE TWO. These were not near-copies, they were
   two different buttons wearing one class name:

     styles.css  — green --accent fill, body font, sentence case, soft glow
     widgets.css — gold --cta gradient, mono, UPPERCASE, tracked, hard edge

   widgets.css's own comment records the decision that settled this: ".btn-
   primary, .act-btn.primary and .dash-action.primary each defined the same
   button independently in green, while .primary-button, Schedule's Add Game,
   the sign-in page and the first-run wizard were all gold. Add a game was
   green on Home and gold on Schedule; the studio read as two products
   stitched together. Gold wins because it is what a coach meets first."

   That decision was made and then only half-applied — the green button
   survived wherever styles.css loaded, which is app.html. The gold broadcast
   button below is the canonical one, so the migration is now finished rather
   than merely documented.

   NOT UNIFIED, DELIBERATELY: .empty-state exists in both styles.css and
   widgets.css, but those are two different components that collided on a
   name — a small bordered inline box ("no plays tagged yet") versus a
   full-height centered page state. No page loads both sheets, so they never
   actually conflict. Merging them by name would break both. Left alone on
   purpose; renaming one is a bigger, separate job.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   CARD
   The studio card: a layered "lit crown" gradient, hairline border, hard
   edge. Was defined in styles.css (flat two-stop gradient) and widgets.css
   (this one, with three raw hexes). The richer widgets version wins and its
   literals now come from tokens.css, so the values are unchanged.
   ------------------------------------------------------------------------- */
.card {
  position: relative;
  background:
    radial-gradient(130% 90% at 50% -20%, var(--card-crown), transparent 55%),
    linear-gradient(168deg, var(--card-top), var(--card-base) 78%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--glass, inset 0 1px 0 rgba(255, 255, 255, 0.05));
  padding: var(--space-5);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}

/* ---------------------------------------------------------------------------
   BUTTONS
   One shape for every "thing to press": gold primary, outlined ghost, coral
   danger. Mono + uppercase + tracked is the Broadcast OS voice; the hard edge
   comes from --radius-sm (0px) rather than the 2px literal the widgets copy
   carried, so buttons obey the same geometry law as everything else.
   ------------------------------------------------------------------------- */
.primary-button,
.ghost-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 10px var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter 140ms ease, border-color 140ms ease, background 140ms ease;
}

/* Anchors used as buttons must never render as underlined links. */
a.primary-button,
a.ghost-button,
a.danger-button {
  text-decoration: none;
}

.primary-button {
  border-color: var(--cta-ring);
  background: linear-gradient(180deg, var(--cta-hi), var(--cta));
  /* Literal fallback: an unresolved var() computes to `unset` (= `inherit` for
     colour), not to the previous declaration, so a missing token puts light
     body text on a gold slab rather than falling back to anything safe. */
  color: var(--cta-ink, #171106);
  -webkit-text-fill-color: var(--cta-ink, #171106);
}
.primary-button:hover { filter: brightness(1.06); }

.ghost-button {
  border-color: var(--border2);
  background: var(--surface);
  color: var(--text0);
}
.ghost-button:hover { border-color: var(--text4); }

.danger-button {
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
  color: var(--danger);
}
.danger-button:hover { border-color: color-mix(in srgb, var(--danger) 62%, transparent); }

.primary-button:focus-visible,
.ghost-button:focus-visible,
.danger-button:focus-visible { outline: none; box-shadow: var(--ring); }

button[disabled],
.primary-button[disabled],
.ghost-button[disabled],
.danger-button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}