/* ===========================================================================
   Shared primitives — Rebuild Wave 1.
   ===========================================================================

   Every page inherits this. It sits between tokens.css (which decides values)
   and custom.css (which still holds per-screen rules), so a page that needs to
   override something still can.

   ## Scope, deliberately narrow

   This file restyles the primitives Bootstrap 4 already renders — type,
   buttons, inputs, cards, tables, nav, footer, modals — by overriding
   Bootstrap's own classes. It does NOT introduce a parallel component set.
   Adding `.c-button` alongside `.btn` would mean every template had to be
   migrated before anything looked different, and 200+ templates is not a Wave 1
   change.

   So: same class names, new values, drawn from the tokens. A template that is
   never touched still inherits the new system.

   ## The one rule that matters

   Nothing here hard-codes a colour. If a value is not in tokens.css it does not
   belong in this file.
   =========================================================================== */

/* ---------------------------------------------------------------- type ---- */

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display face for headings. Instrument Serif has one weight, so hierarchy
   comes from size and spacing rather than boldness -- which is why these
   deliberately do not set font-weight: 700. */
h1, h2, h3,
.h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--text-2xl); }
h2, .h2 { font-size: var(--text-xl); }
h3, .h3 { font-size: var(--text-lg); }

/* h4-h6 stay in the interface face: at these sizes a serif reads as decoration
   rather than hierarchy. */
h4, h5, h6,
.h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
h4, .h4 { font-size: var(--text-base); }
h5, .h5 { font-size: var(--text-sm); }
h6, .h6 { font-size: var(--text-xs); }

/* Figures that line up: durations, credits, counts, model names. */
.font-mono,
.duration-input,
.clipLength,
code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Uppercase micro-labels need the tracking or they read as shouting. */
.text-uppercase,
.castLabel,
.sceneBarNum {
  letter-spacing: var(--tracking-label);
}

/* Running text has to stop somewhere. Guide and terms currently run the full
   width of the viewport, which is why they are unreadable at 1440. */
.measure { max-width: var(--measure); }

a {
  color: var(--brand-500);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover, a:focus { color: var(--brand-700); text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }

::selection { background: var(--brand-soft); color: var(--ink); }

/* ------------------------------------------------------------- buttons ---- */

.btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: var(--space-2) var(--space-4);
  box-shadow: none;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }

/* The primary action. `.btn-main` was the brand button that was never actually
   red -- it rendered as Bootstrap's default grey-blue. */
.btn-main,
.btn-primary {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #FFFFFF;
}
.btn-main:hover, .btn-main:focus,
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #FFFFFF;
}

.btn-outline-main,
.btn-outline-primary {
  background: transparent;
  border-color: var(--brand-500);
  color: var(--brand-500);
}
.btn-outline-main:hover, .btn-outline-main:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #FFFFFF;
}

.btn-secondary,
.btn-outline-secondary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background: var(--surface-alt);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-danger { background: var(--error); border-color: var(--error); color: #FFFFFF; }
.btn-danger:hover, .btn-danger:focus { background: var(--danger-700); border-color: var(--danger-700); }

.btn-link { color: var(--brand-500); border-color: transparent; }
.btn-link:hover { color: var(--brand-700); }

.btn-sm  { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }
.btn-xs  { font-size: var(--text-2xs); padding: 2px var(--space-2); }
.btn-lg  { font-size: var(--text-base); padding: var(--space-3) var(--space-5); }

.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; }

/* -------------------------------------------------------------- inputs ---- */

.form-control,
.custom-select,
textarea,
select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-control:focus,
.custom-select:focus,
textarea:focus,
select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-soft);
  outline: none;
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:disabled, .form-control[readonly] { background: var(--surface-alt); color: var(--ink-muted); }

.control-label, label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ink-muted);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--brand-500);
  border-color: var(--brand-500);
}

.is-invalid, .form-control.is-invalid { border-color: var(--error); }
.invalid-feedback { color: var(--error); font-size: var(--text-xs); }

/* --------------------------------------------------------------- cards ---- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.card-header, .card-footer {
  background: var(--surface-sunk);
  border-color: var(--line);
}

.badge {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: .04em;
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
}
.badge-light2 { background: var(--surface-alt); color: var(--ink-muted); }

/* -------------------------------------------------------------- tables ---- */

.table {
  color: var(--ink);
  font-size: var(--text-sm);
}
.table th {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  border-top: 0;
  border-bottom: 1px solid var(--line);
}
.table td {
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.table-hover tbody tr:hover { background: var(--surface-sunk); }

/* Figures in a column have to line up or the column is decoration. */
.table td.text-right,
.table th.text-right { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- nav ---- */

.navbar { box-shadow: none; }

.navbar .nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease);
}

.dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  font-size: var(--text-sm);
}
.dropdown-item { color: var(--ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-alt); color: var(--ink); }

.nav-tabs { border-bottom: 1px solid var(--line); }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ink-muted);
}
.nav-tabs .nav-link.active {
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--brand-500);
}

/* -------------------------------------------------------------- modals ---- */

.modal-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-display); }
.modal-backdrop.show { opacity: .55; }

.close { color: var(--ink-muted); text-shadow: none; opacity: 1; }
.close:hover { color: var(--ink); }

/* ------------------------------------------------------------ feedback ---- */

.alert { border-radius: var(--radius-sm); border: 1px solid transparent; font-size: var(--text-sm); }
.alert-success { background: var(--ready-soft); border-color: var(--ready); color: var(--ready); }
.alert-warning { background: var(--attn-soft);  border-color: var(--attn);  color: var(--attn); }
.alert-danger  { background: var(--error-soft); border-color: var(--error); color: var(--error); }

/* ----------------------------------------------------------------- a11y --- */

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}