/* ============================================================
   Cue — Spacing, radius, shadow tokens
   The system is em-based and rhythmic: gaps and element heights
   step in a consistent ratio. Cards use a large 30px radius and
   a soft, wide ambient shadow. Buttons are full pills.
   ============================================================ */

:root {
  /* ---- Gaps (space between things) ---- */
  --cue-dim-gap-xs: 0.25em;
  --cue-dim-gap-s: 0.5em;
  --cue-dim-gap-m: 1em;
  --cue-dim-gap-l: 1.875em;
  --cue-dim-gap-xl: 2.5em;

  /* ---- Element heights (controls, rows) ---- */
  --cue-dim-elem-xs: 1.5em;
  --cue-dim-elem-s: 2em;
  --cue-dim-elem-m: 2.75em;
  --cue-dim-elem-l: 3.5em;

  /* ---- Compact (small) gaps & elements ---- */
  --cue-dim-s-gap-s: 0.375em;
  --cue-dim-s-gap-m: 0.625em;
  --cue-dim-s-gap-l: 1em;
  --cue-dim-s-elem-xs: 1em;
  --cue-dim-s-elem-s: 1.25em;
  --cue-dim-s-elem-m: 1.75em;

  /* ---- Container padding ---- */
  --cue-dim-padding-main: 1.25em;
  --cue-dim-padding-sub: 0.625em;

  /* ---- Flex / grid gap aliases ---- */
  --cue-flex-gap-xs: var(--cue-dim-gap-xs);
  --cue-flex-gap-s: var(--cue-dim-gap-s);
  --cue-flex-gap-m: var(--cue-dim-gap-m);
  --cue-flex-gap-l: var(--cue-dim-gap-l);
  --cue-flex-gap-xl: var(--cue-dim-gap-xl);
  --cue-grid-gap-s: var(--cue-dim-gap-s);
  --cue-grid-gap-m: var(--cue-dim-gap-m);
  --cue-grid-gap-l: var(--cue-dim-gap-l);

  /* ---- Radius ---- */
  --cue-radius-pill: 9999px;          /* buttons, chips */
  --cue-radius-card: 1.875em;         /* 30px — cards, popups */
  --cue-radius-menu: 0.9375em;        /* 15px — menus, popovers */
  --cue-card-border-radius: var(--cue-radius-card);
  --cue-menu-border-radius: var(--cue-radius-menu);

  /* ---- Shadow ---- */
  --cue-card-box-shadow: 0 1px 1.5em rgba(0, 0, 0, 0.2);
  --cue-menu-box-shadow: 0 1px 1.25em rgba(0, 0, 0, 0.1);

  /* ---- Card defaults ---- */
  --cue-card-padding-x: 1em;
  --cue-card-padding-y: 1em;
  --cue-card-border-color: var(--cue-border-color);
}

body.dark,
.dark,
[data-theme="dark"] {
  --cue-card-box-shadow: 0 1px 1.5em rgba(255, 255, 255, 0.3);
  --cue-menu-box-shadow: 0 1px 1.25em rgba(255, 255, 255, 0.1);
}