:root {
  /* Typography — Inter is the only font family in the app. Technical / code
     surfaces (IDs, log lines, monospaced readouts) use the same face but
     with `font-variant-numeric: tabular-nums` and `font-feature-settings`
     to get a monospaced look without adding a second font. */
  --font-sans: 'Inter', sans-serif;

  --neutral-100: #f8f9fa;
  --neutral-200: #e9ecef;
  --neutral-300: #dee2e6;
  --neutral-400: #adb5bd;
  --neutral-500: #868e96;
  --neutral-600: #495057;
  --neutral-700: #343a40;
  --neutral-800: #212529;
  --neutral-900: #101418;

  --vibrance-hover: #5b72f2;
  --vibrance-info: #5b72f2;
  --vibrance-success: #5befbd;
  --vibrance-warning: #eac85e;
  --vibrance-danger: #ea5e5e;

  /* Focus ring - accessible (outline-based, no box-shadow). Consumers use
     `outline: var(--focus-outline); outline-offset: var(--focus-offset);`. */
  --focus-outline: 2px solid var(--vibrance-hover);
  --focus-offset: 2px;

  --bg-app: var(--neutral-900);
  --bg-panel: color-mix(in srgb, var(--neutral-800) 100%, transparent);
  --bg-card: color-mix(in srgb, var(--neutral-800) 100%, transparent);
  --bg-card-soft: color-mix(in srgb, var(--neutral-700) 50%, transparent);
  --bg-hover: color-mix(in srgb, var(--vibrance-hover) 25%, transparent);
  --bg-overlay: color-mix(in srgb, var(--neutral-900) 100%, transparent);
  --bg-accent-soft: color-mix(in srgb, var(--vibrance-hover) 50%, transparent);
  --bg-status-neutral: color-mix(in srgb, var(--neutral-500) 50%, transparent);
  --bg-status-success: color-mix(in srgb, var(--vibrance-success) 50%, transparent);
  --bg-status-warning: color-mix(in srgb, var(--vibrance-warning) 25%, transparent);
  --bg-danger-soft: color-mix(in srgb, var(--vibrance-danger) 50%, transparent);
  --border-danger-soft: color-mix(in srgb, var(--vibrance-danger) 50%, transparent);
  --bg-success-soft: color-mix(in srgb, var(--vibrance-success) 50%, transparent);
  --border-success-soft: color-mix(in srgb, var(--vibrance-success) 50%, transparent);

  --text-primary: var(--neutral-100);
  --text-secondary: var(--neutral-400);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-900);

  --border-subtle: color-mix(in srgb, var(--neutral-400) 25%, transparent);
  --border-strong: color-mix(in srgb, var(--neutral-400) 25%, transparent);

  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  --radius-xs: 0.3rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --content-max: 84rem;

  --text-2xs: 0.65rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;

  /* Control heights — unified scale for buttons, inputs, pills, nav items.
     Use these instead of hardcoded rem/px values. */
  --control-h-xs: 1.5rem;   /* 24px — inline pills, dense tags */
  --control-h-sm: 2rem;     /* 32px — compact buttons, utility icons */
  --control-h-md: 2.25rem;  /* 36px — default button */
  --control-h-lg: 2.5rem;   /* 40px — inputs, nav items, primary controls */

  /* Icon sizing — unified scale. SVG inside .icon or svg[data-icon]. */
  --icon-xs: 0.75rem;  /* 12px */
  --icon-sm: 0.875rem; /* 14px */
  --icon-md: 1rem;     /* 16px */
  --icon-lg: 1.25rem;  /* 20px */
  --icon-xl: 1.5rem;   /* 24px */

  /* Card grid — one source of truth for every card grid in the app. */
  --card-min: 15rem;

  /* Modal widths — dialog sizing tokens. */
  --modal-w-sm: 30rem;  /* compact confirm dialogs */
  --modal-w-md: 32rem;  /* default story/form modal */
  --modal-w-lg: 52rem;  /* wide edit modal */
  --modal-w-xl: 72rem;  /* extra-wide modal (library preview) */

  /* Popover / dropdown positioning — offset from the trigger and max height
     of portalled menus. Used by form/js/modules/ui/ui-dropdown.js and
     form/js/modules/color-picker.js. */
  --popover-offset: 0.375rem; /* 6px */
  --dropdown-max-h: 20rem;    /* 320px */

  --transition-base: 150ms ease;
  --transition-fast: 80ms ease;
  --transition-slow: 300ms ease;

  /* Z-index layer system — one source of truth for stacking order.
     Layers: sticky UI < dropdowns (inside flow) < modal backdrop
           < portalled dropdowns (must escape modal) < toasts (on top). */
  --z-sticky: 10;
  --z-dropdown: 40;
  --z-overlay: 50;      /* modals / backdrops */
  --z-popover: 60;      /* portalled popovers escaping modals */
  --z-toast: 70;        /* transient notifications, always on top */
}

:root[data-theme='light'] {
  --bg-app: var(--neutral-100);
  --bg-panel: var(--neutral-200);
  --bg-card: var(--neutral-200);
  --bg-card-soft: var(--neutral-100);
  --bg-hover: color-mix(in srgb, var(--vibrance-hover) 12%, transparent);
  --bg-overlay: color-mix(in srgb, var(--neutral-800) 32%, transparent);
  --bg-accent-soft: color-mix(in srgb, var(--vibrance-hover) 12%, transparent);
  --bg-status-neutral: color-mix(in srgb, var(--neutral-500) 20%, transparent);
  --bg-status-success: color-mix(in srgb, var(--vibrance-success) 18%, transparent);
  --bg-status-warning: color-mix(in srgb, var(--vibrance-warning) 18%, transparent);
  --bg-danger-soft: color-mix(in srgb, var(--vibrance-danger) 10%, transparent);
  --border-danger-soft: color-mix(in srgb, var(--vibrance-danger) 22%, transparent);
  --bg-success-soft: color-mix(in srgb, var(--vibrance-success) 10%, transparent);
  --border-success-soft: color-mix(in srgb, var(--vibrance-success) 22%, transparent);

  --text-primary: var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-100);

  --border-subtle: color-mix(in srgb, var(--neutral-600) 18%, transparent);
  --border-strong: color-mix(in srgb, var(--neutral-600) 30%, transparent);
}