/* CSS systems — tokens (#503)
 *
 * Design decisions as named custom properties. Only values with *real*
 * reuse live here; one-off colours stay where they are used. Defining a
 * token changes nothing until something references it.
 *
 * See docs/css-systems/AUDIT.md for the source survey. */

:root {
  /* Brand palette --------------------------------------------------- */
  /* Two distinct site cyans, preserved exactly as the homepage used
     them: the saturated hex on links, and the slightly muted HSL on the
     heading. (They are NOT the same colour — #18C1F3 is ~90% sat.) */
  --brand-cyan: #18C1F3;                        /* links */
  --brand-cyan-muted: hsla(194, 69%, 52%, 1);   /* heading (h1) */
  /* Warm ink used for body text. */
  --ink: #420;
  /* The page background gradient stops. */
  --gradient-from: #F66633;
  --gradient-to: #6969F3;

  /* Z-index ladder -------------------------------------------------- */
  /* The fixed layers, top to bottom, as already used on the homepage. */
  --z-overlay: 10001;        /* search / square-info overlay */
  --z-overlay-control: 10002; /* a control pinned above an overlay */

  /* Safe-area constants --------------------------------------------- */
  /* Notch / home-indicator insets, with a 0 fallback for non-notched. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}