/* PRISMA DESIGN TOKENS (ADR 0001)
   Ported from .scratch/prisma-v1/design/tokens.css (issue 39); the kit
   built on top of it lives in ui.css (issue 29). Tokens ONLY — every raw
   color and size in the app lives in this file; component CSS references
   these custom properties and nothing else.
   Dark mode: the layout sets html[data-theme] from the Member's stored
   choice, this browser's stored choice, or prefers-color-scheme.
   Light values are repeated under [data-theme="light"] so a light block
   can nest inside a dark page (the style guide renders both side by
   side). */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* type */
  --font-sans: "Hanken Grotesk", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", "New York", georgia, serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.5rem;
  --weight-medium: 530;
  --weight-bold: 680;

  /* line-height scale (issue 08): body copy and the textarea/caption pair
     share --leading-body; display heroes share --leading-tight. Raw
     line-height in component CSS is a defect once these exist. */
  --leading-tight: 1.1;
  --leading-body: 1.5;
  --leading-relaxed: 1.6;

  /* spacing, radii, layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;
  --shell-column: 960px; /* the app content column (ADR 0003, widened from 720 in ADR 0013) */
  --column-prose: 720px; /* comfortable reading band for long prose (marketing lockups) */
  --card-narrow: 420px; /* auth cards, modals */
  --column-review: 600px; /* the client review surface (issue 12) */
  --column-admin: 960px;  /* the staff admin dashboard (issue 34) */
  --column-marketing: 960px; /* the marketing site: landing nav + footer */
  --admin-metric-min: 160px; /* admin dashboard metric card minimum width */
  --admin-qr-max: 200px;     /* QR code SVG maximum display width */
  --billing-plan-min: 180px; /* billing plan-chooser grid track minimum (issue 13) */
  --settings-nav-w: 232px;   /* settings two-pane left sub-nav width (ADR 0013) */
  --media-ring: 132px;       /* media library storage ring diameter (ADR 0013) */
  --search-min: 200px;       /* posts toolbar search field min width */
  --search-max: 280px;       /* posts toolbar search field max width */

  /* kit metrics — intrinsic component dimensions; raw sizes live here
     so component CSS stays token-only. Exempt micro-values that may stay
     literal in component CSS: the 1px visually-hidden a11y pattern,
     ±1px hover nudges, letter-spacing ems, and transition durations. */
  --btn-pad: 10px 20px;
  --pill-pad: 6px 14px;
  --chip-pad: 3px 10px;
  --chip-gap: 6px;
  --input-pad: 10px 14px;
  --hairline: 1px solid var(--border);
  --hairline-strong: 1px solid var(--border-strong);
  --underline-w: 2px;
  --nudge: 2px; /* optical alignment nudge just past the ±1px literal exemption (issue 13) */
  --focus-outline: 2px solid var(--accent);
  --focus-outline-offset: 2px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  --dot: 8px;
  --dot-sm: 6px;
  --icon-box-sm: 22px;
  --icon-box: 24px;
  --icon-box-lg: 28px;
  --toggle-w: 38px;
  --toggle-h: 22px;
  --toggle-inset: 3px;
  --meter-h: 6px;
  --fab-size: 54px;
  --tap-min: 44px; /* minimum touch-target box on coarse pointers */

  /* avatar backgrounds: hue is per-member data (UiHelper#avatar); at
     55% saturation, white initials clear 4.5:1 at EVERY hue only while
     lightness stays at or below 30% */
  --avatar-s: 55%;
  --avatar-l: 30%;
  --textarea-min-h: 120px;
  --thumb-pick: 96px; /* composer media-picker tile (issue 04) */
  --measure-narrow: 380px; /* comfortable line length for short prose */
  --cal-cell-h: 92px; /* month-grid day cell (issue 06) */
  --emoji-popover-w: 340px; /* emoji picker popover (issue 47) */
  --emoji-popover-h: 352px;
  --emoji-sheet-h: 55dvh; /* its bottom-sheet height at phone widths */

  /* elevation */
  --shadow-sm: 0 1px 2px rgb(16 14 30 / 5%);
  --shadow-md: 0 4px 16px rgb(16 14 30 / 7%);
  --shadow-pop: 0 12px 32px rgb(16 14 30 / 18%);
  --backdrop: rgb(16 14 30 / 45%);
  --scrim: rgb(0 0 0 / 55%); /* in-tile overlay scrim (video play badge) */

  /* brand. Every prism stop keeps --accent-ink text at >= 4.5:1 (WCAG
     AA): check white-on-stop ratios before lightening any stop. */
  --prism: linear-gradient(120deg, #4f46e5 0%, #8552f5 45%, #e0177b 100%);
  --prism-soft: linear-gradient(120deg, rgb(79 70 229 / 10%), rgb(133 82 245 / 10%), rgb(224 23 123 / 10%));
  --accent: #6d5ae8;
  --accent-ink: #fff;

  /* --accent doubles as a fill/focus color and clears AA on --surface but
     not on --surface-2; use --accent-text for any accent-colored TEXT or
     link so it stays >= 4.5:1 on bg, surface, AND surface-2 (issue 07). */
  --accent-text: #5a45d8;

  /* select chevron (ui.css select.input): a data-URI cannot read custom
     properties, so the stroke is baked per theme to match --ink-muted */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236b6786' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* surfaces & ink */
  --bg: #f7f6fb;
  --surface: #fff;
  --surface-2: #f1effa;
  --ink: #1b1830;
  --ink-muted: #6b6786;

  /* lowest-contrast text tier: keep >= 4.5:1 on ALL text surfaces (--bg,
     --surface, --surface-2) per WCAG AA (issue 07); it styles real text
     (hints, placeholders, inactive tabs, table heads, outside-month days
     which render on --surface-2 hover) */
  --ink-faint: #6a6488;
  --border: #e7e4f2;
  --border-strong: #d5d1e6;

  /* post & channel states. Chip text sits on its -bg pair at 12px, so
     every fg keeps >= 4.5:1 on its bg; --published/--failed also serve
     as --ok/--danger text on --surface and --bg, same bar. */
  --state-draft: var(--ink-muted); /* draft is deliberately the neutral text tone */
  --state-draft-bg: #efedf6;
  --state-pending: #885f08; /* darkened to clear 4.5:1 as --warn text on --surface-2 (issue 07) */
  --state-pending-bg: #fdf3dd;
  --state-approved: #0c7a5f;
  --state-approved-bg: #def5ee;
  --state-scheduled: #3b5bdb;
  --state-scheduled-bg: #e4eafd;
  --state-publishing: #7c3aed;
  --state-publishing-bg: #efe7fd;
  --state-published: #137a3a;
  --state-published-bg: #e0f3e5;
  --state-failed: #cb2334;
  --state-failed-bg: #fde6e8;
  --state-active: var(--state-published);
  --state-active-bg: var(--state-published-bg);
  --state-paused: var(--state-draft);
  --state-paused-bg: var(--state-draft-bg);
  --state-connected: var(--state-published);
  --state-expiring: var(--state-pending);
  --state-broken: var(--state-failed);
  --ok: var(--state-published);
  --warn: var(--state-pending);
  --danger: var(--state-failed);
}

[data-theme="dark"] {
  color-scheme: dark;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a5a1c0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --accent: #8f7df2;
  --accent-text: #a596f6; /* accent-as-text, >= 4.5:1 on all dark surfaces (issue 07) */
  --bg: #131120;
  --surface: #1c1930;
  --surface-2: #262240;
  --ink: #edebf7;
  --ink-muted: #a5a1c0;
  --ink-faint: #9794af; /* same AA-on-all-surfaces rule as the light value (issue 07) */
  --border: #2e2a4a;
  --border-strong: #3d3860;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 45%);
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 60%);
  --backdrop: rgb(0 0 0 / 60%);
  --state-draft: #9c98b5;
  --state-draft-bg: #2a2741;
  --state-pending: #e3b341;
  --state-pending-bg: #37301c;
  --state-approved: #34d39b;
  --state-approved-bg: #15342b;
  --state-scheduled: #7e9bff;
  --state-scheduled-bg: #20284a;
  --state-publishing: #b18aff;
  --state-publishing-bg: #2d2347;
  --state-published: #4ade80;
  --state-published-bg: #173326;
  --state-failed: #ff6b7a;
  --state-failed-bg: #3d1d24;
}