/* Klema UI tokens: the admin, the platform admin, the rich text editor and the
   editing outlines in the live preview. Everything is prefixed --ui- so it
   never collides with a church's own tokens (assets/tokens.css) when the
   editor runs inside a church page.

   Raw values are fine only for hairlines (0-3px), white/black overlays and
   shadows (rgba), and pictures of church designs (theme thumbnails, colour
   pickers, content previews). */
:root {
  /* Neutrals */
  --ui-bg: #f4f6f9;
  --ui-surface: #ffffff;
  --ui-surface-2: #f8fafc;      /* hover on white, table heads, empty states */
  --ui-fill: #f1f4f8;           /* segmented controls, quiet badges, placeholders, disabled fields */
  --ui-fill-strong: #e9edf3;    /* hover on fills and ghost buttons, code */
  --ui-ink: #0f172a;
  --ui-ink-2: #334155;
  --ui-muted: #64748b;          /* 4.8:1 on white: small grey labels stay readable */
  --ui-line: #e8ebf0;
  --ui-line-2: #e2e6ec;
  --ui-line-strong: #cbd2dc;    /* hovered borders, grips */

  /* Brand: royal blue, or the colour each person picks as their look
     (assets/look.js sets --ui-primary on <html>; the rest follow it). */
  --ui-primary: #1d4ed8;
  --ui-primary-ink: color-mix(in srgb, var(--ui-primary) 82%, black);
  --ui-primary-soft: color-mix(in srgb, var(--ui-primary) 9%, white);
  --ui-on-primary: #ffffff;
  --ui-ring: color-mix(in srgb, var(--ui-primary) 18%, transparent);   /* focus and selection rings */

  /* Charts (the dashboard): series in this order. Checked together for
     colour-blind separation and contrast on white. */
  --ui-chart-1: var(--ui-primary);
  --ui-chart-2: #e0602b;
  --ui-chart-3: #14a06e;

  /* Status: base, text on the soft background, soft background, border */
  --ui-danger: #d63c4a;
  --ui-danger-ink: #a52734;
  --ui-danger-soft: #fdecee;
  --ui-danger-line: #f7c9ce;
  --ui-success: #1f9d63;
  --ui-success-ink: #15794b;
  --ui-success-soft: #e3f6ec;
  --ui-success-line: #bfe8d2;
  --ui-warning: #c98a0b;
  --ui-warning-ink: #9a6a06;
  --ui-warning-soft: #fff3db;
  --ui-warning-line: #f3dda0;

  /* Dark surfaces: sidebar, toasts, sign-in background */
  --ui-side: #0f172a;
  --ui-side-2: #1e293b;
  --ui-side-ink: #cbd5e1;
  --ui-side-muted: #94a3b8;

  /* Type */
  --ui-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --ui-text-2xs: 11px;   /* badges, tiny labels */
  --ui-text-xs: 12px;    /* table heads, meta, small buttons */
  --ui-text-sm: 13px;    /* labels, buttons, tabs */
  --ui-text-md: 14px;    /* body, inputs */
  --ui-text-lg: 15px;    /* panel titles, large buttons */
  --ui-text-xl: 16px;    /* modal titles, large inputs */
  --ui-text-2xl: 20px;
  --ui-text-3xl: 22px;   /* edit title, counters */
  --ui-text-4xl: 26px;   /* page titles */

  /* Corners */
  --ui-radius-xs: 4px;
  --ui-radius-sm: 6px;
  --ui-radius: 8px;      /* buttons, inputs */
  --ui-radius-md: 10px;  /* tiles, groups */
  --ui-radius-lg: 12px;  /* panels, cards */
  --ui-radius-xl: 16px;  /* sign-in card, dialogs */
  --ui-radius-pill: 999px;

  /* Shadows */
  --ui-shadow: 0 1px 2px rgba(23, 22, 31, .04), 0 4px 16px rgba(23, 22, 31, .06);
  --ui-shadow-pop: 0 10px 30px rgba(20, 20, 40, .16);   /* popovers, floating toolbar */

  /* Spacing: the same 4px grid as church sites (assets/tokens.css; a unit
     test keeps the two identical) */
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-36: 144px;
}