/* Every colour, space, and timing value in the app. Retheme here, nowhere else.
 *
 * The rule that outranks the rest of the look: this has to be readable from
 * across the room. That is why --scale exists, why body text never goes below
 * 14px, and why the decorative layers (scanlines, grid, glow) are pinned to
 * opacities low enough that they cannot eat contrast.
 */

:root {
  /* ---- Scale -------------------------------------------------------------
   * One number to size the whole HUD. Bump it when the desk moves further away.
   */
  --scale: 1;

  /* ---- Surfaces ---------------------------------------------------------- */
  --bg-void: #070a0e;        /* behind everything */
  --bg-deep: #0b1017;        /* page ground */
  --bg-panel: #111823;       /* panel fill */
  --bg-panel-raised: #16202e;
  --bg-inset: #0a0f16;       /* wells, inputs, readouts */

  /* ---- Rules and edges --------------------------------------------------- */
  --line-faint: #1c2836;
  --line: #27374a;
  --line-bright: #35506b;

  /* ---- Text -------------------------------------------------------------- */
  --text-bright: #e8f0f8;    /* headline data */
  --text: #b9c8d8;           /* body */
  --text-dim: #74879c;       /* labels, units */
  --text-faint: #4a5b6e;     /* disabled, placeholders */

  /* ---- Accents ----------------------------------------------------------- */
  --amber: #f2a73b;          /* primary: the thing to act on */
  --amber-bright: #ffc46b;
  --amber-dim: #8a5f1f;
  --amber-glow: rgba(242, 167, 59, 0.16);

  --teal: #48d2c4;           /* secondary: state, progress, confirmation */
  --teal-bright: #7ff0e4;
  --teal-dim: #1f6f68;
  --teal-glow: rgba(72, 210, 196, 0.14);

  --danger: #ff6b5e;         /* overdue, disconnected, failed */
  --danger-dim: #7d2f29;
  --danger-glow: rgba(255, 107, 94, 0.16);
  --success: var(--teal);

  /* ---- Type -------------------------------------------------------------- */
  --font-mono: "JetBrains Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;

  --fs-micro: calc(10px * var(--scale));   /* bracket labels only */
  --fs-label: calc(11px * var(--scale));
  --fs-body: calc(14px * var(--scale));
  --fs-data: calc(16px * var(--scale));
  --fs-heading: calc(20px * var(--scale));
  --fs-hero: calc(34px * var(--scale));    /* the one next task */
  --fs-mega: calc(48px * var(--scale));

  --tracking-label: 0.18em;
  --tracking-wide: 0.08em;

  /* ---- Space ------------------------------------------------------------- */
  --gap-xs: calc(4px * var(--scale));
  --gap-sm: calc(8px * var(--scale));
  --gap: calc(14px * var(--scale));
  --gap-lg: calc(22px * var(--scale));
  --gap-xl: calc(34px * var(--scale));

  --radius: 2px;             /* console chrome is nearly square */
  --bracket-size: calc(12px * var(--scale));
  --bracket-weight: 1px;

  /* ---- Motion -----------------------------------------------------------
   * Mechanical: fast, linear-ish, no overshoot. Panels slide, nothing bounces.
   */
  --ease-mech: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-fast: 110ms;
  --dur: 180ms;
  --dur-slow: 320ms;
  --tick-duration: 420ms;    /* how long a number takes to count up */

  /* ---- Texture ---------------------------------------------------------- */
  --scanline-ink: rgba(255, 255, 255, 0.6);
  --scanline-opacity: 0.035;
  --grid-opacity: 0.028;
}

/* Motion is decoration here; the data is the point. Kill all of it on request,
 * including the number tick, which JS reads off this same preference. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
    --tick-duration: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}