/* =============================================================== Blockshot
   The design system: every colour, radius and duration in the product resolves
   to a token here. Three rules hold it together.

   1. ONE ACCENT, AND IT IS THE BRAND. The logo is a white cube with orange crop
      marks on charcoal, so the interface is charcoal with an orange accent. Orange
      means "this is the action" and nothing else uses it - not links, not borders,
      not decoration. An accent that appears everywhere stops pointing at anything.

   2. SEMANTIC COLOUR IS NOT THE ACCENT. Success, warning and danger carry meaning
      a user must read correctly under stress, so they are their own hues and never
      double as branding. Nothing in the product signals state by colour alone.

   3. THE VIEWPORT KEEPS ITS OWN LANGUAGE. Inside the 3D scene, cyan is the camera
      path, amber is a keyframe, green is the start marker. That vocabulary is about
      the shot, not about the app, so the chrome deliberately does not use it - which
      is also why moving the UI accent off cyan made the viewport read better, not
      worse. Two of those values are duplicated as hex literals in viewer.js and
      cameraPath.js; --scene-key and --scene-start below must stay in step with them.

   Contrast, measured in the browser rather than assumed: text 16.3:1, muted 7.5:1,
   faint 4.6:1, accent on the ground 6.3:1, and --accent-ink on the accent 6.3:1.
   Every pairing clears WCAG AA for body text, including the faintest one - so a label
   being secondary never means it is hard to read.
   ========================================================================= */

:root {
  /* --- ground and surfaces: the logo's charcoal, warmed a half-step ------- */
  --bg:        #0B0D11;   /* the page itself */
  --panel:     #12151B;   /* the icon's charcoal exactly - chrome, cards, bars */
  --raised:    #1A1F27;   /* hover, active rows, inset controls */
  --sunken:    #0E1116;   /* inputs and wells */
  --line:      #242B36;   /* a border you should notice */
  --line-soft: #191F28;   /* a divider you should not */

  /* --- text: neutrals biased a touch warm, so they read as chosen -------- */
  --text:  #E9EBEF;
  --muted: #99A1AD;
  --faint: #7A828E;   /* lightened to clear 4.5:1 on --bg; it was 4.12 */

  /* --- the accent. The brand, and the only thing that means "act" -------- */
  --accent:      #FF5C1A;
  --accent-hover:#FF7A45;
  --accent-weak: rgba(255, 92, 26, .13);   /* selected rows, active tabs */
  --accent-ink:  #170B04;                  /* text ON the accent */

  /* --- semantic. Meaning, never branding -------------------------------- */
  --ok:     #7DD98F;
  --amber:  #FFB74D;
  --danger: #F0716C;

  /* --- the viewport's vocabulary, mirrored from the 3D code -------------- */
  --scene-path:  #4FC3F7;
  --scene-key:   #FFB74D;
  --scene-start: #81C784;

  /* --- shape and motion -------------------------------------------------- */
  --r:    8px;
  --r-sm: 6px;
  --r-lg: 12px;
  --shadow: 0 18px 44px rgba(0, 0, 0, .42);

  /* One duration for state changes, a longer one for things that travel. */
  --t:      140ms;
  --t-slow: 240ms;
  --ease:   cubic-bezier(.2, .7, .3, 1);

  /* --- type scale. 13.5px base suits a dense tool; the steps are fixed --- */
  --fs-xs:  11px;
  --fs-sm:  12.5px;
  --fs:     13.5px;
  --fs-md:  15px;
  --fs-lg:  18px;
  --fs-xl:  22px;

  /* --- brand constants, for the mark itself ------------------------------ */
  --brand-accent: #FF5C1A;   /* the crop marks; see public/brand/README.md */
  --brand-ink:    #12141A;
}

* { box-sizing: border-box; }

/* Panes, menus and the shortcut sheet are display:flex, which would otherwise beat the
   UA rule for the hidden attribute and leave every panel on screen at once. */
[hidden] { display: none !important; }

/* One focus ring for the whole product, on :focus-visible so a mouse click does not
   leave a ring behind but a Tab key always does. Two solid pixels with an offset, not
   a faint shadow - a focus indicator that can be missed is not one. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Anything that acts like a button says so under the cursor. */
button:not(:disabled), [role="button"]:not([aria-disabled="true"]), a[href], summary,
label[for], select, input[type="checkbox"], input[type="radio"] {
  cursor: pointer;
}
button:disabled { cursor: not-allowed; }

/* Motion carries meaning here (a panel opening, a value settling) but nobody needs it
   to. Honour the system setting rather than deciding for them. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}