/* Prophys chrome — design-system polish.
 *
 * Everything here is scoped under :root.theme-prophys so the Ruimtemeesters
 * default is byte-for-byte unchanged. Static file (served verbatim, NOT bundled)
 * to dodge the Lightning-CSS token-drop gotcha; linked after theme.css in
 * index.html. Most chrome (shadcn buttons/inputs/dialogs) already crisps up
 * automatically because it reads var(--radius), which the Prophys quadrant
 * overrides to 0.5rem. This file only handles surfaces whose radius/treatment
 * is hardcoded in component markup.
 */

/* Tile depth: route --appcard-shadow/--appcard-hover-shadow to the DS shadow
 * scale. These MUST be set on .workspace-root, not on :root.theme-prophys:
 * .workspace-root (bundled CSS) re-declares both tokens on itself, and custom
 * properties resolve from the nearest defining ancestor — so an :root-level
 * value never reaches the tiles. Same element + higher specificity wins. */
:root.theme-prophys .workspace-root {
  --appcard-shadow: var(--shadow-sm);
  /* Hover lifts to a red-tinted shadow — the interaction reads unmistakably
   * Prophys rather than a generic grey drop-shadow. */
  --appcard-hover-shadow: 0 14px 26px -6px rgba(250, 56, 59, 0.20), 0 5px 12px -6px rgba(0, 17, 28, 0.12);
}
:root.theme-prophys.dark .workspace-root {
  /* On the rich-black base a colour glow pops; push the red a touch harder. */
  --appcard-hover-shadow: 0 16px 32px -6px rgba(250, 56, 59, 0.30), 0 6px 14px -6px rgba(0, 0, 0, 0.55);
}

/* Tiles: the DS radius + a hairline border for definition against the
 * white-smoke background. */
:root.theme-prophys .appcard {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
:root.theme-prophys.dark .appcard {
  border-color: var(--border-2);
}

/* Exo 2 is geometric; headings read sharper very slightly tightened. */
:root.theme-prophys h1,
:root.theme-prophys h2,
:root.theme-prophys h3,
:root.theme-prophys .appcard-title {
  letter-spacing: -0.012em;
}

/* --- doorpakken: header signature --- */
/* An imperial-red hairline under the top bar. The header sets its border
 * colour inline (#161620), so override the bottom edge with !important. This
 * also beats the dark-mode `.dark .workspace-root header` !important rule
 * (this selector carries .theme-prophys, so it's more specific). */
:root.theme-prophys .workspace-root header {
  border-bottom-color: var(--accent) !important;
}