/* Design-system tokens — non-color complement to the Palette engine * (color tokens are emitted per-club on by Club#color_style / #palette_style). * Radius language: 8px controls, 12px cards, full pill. Nothing else. * Shadows mean "floating" (menus, popovers, sticky bars, modals) — cards at rest * use a 1px var(--line) hairline instead. See docs/design_overhaul_plan.md. */ :root { --r-control: 8px; --r-card: 12px; --shadow-float: 0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.10); } /* Form baseline: any input without explicit utility classes picks this up. * Element-level specificity, so Tailwind-classed inputs are unaffected. * Focus ring is ink, not brand — keeps the accent color scarce. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { accent-color: var(--color-primary, #3b5998); } input:where(:not([class])):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]), select:where(:not([class])), textarea:where(:not([class])) { background: var(--surface-2, #ffffff); color: var(--ink, #111827); border: 1px solid var(--line, #e5e7eb); border-radius: var(--r-control); min-height: 44px; padding: 0 12px; font: inherit; } textarea:where(:not([class])) { padding: 10px 12px; } input:where(:not([class])):focus-visible, select:where(:not([class])):focus-visible, textarea:where(:not([class])):focus-visible { outline: 2px solid var(--ink, #111827); outline-offset: 1px; } /* Turbo form submissions: Turbo disables the submitter and sets aria-busy on the form — dim the buttons so the user sees the click registered. */ form[aria-busy="true"] button[type="submit"], form[aria-busy="true"] button:not([type]), form[aria-busy="true"] input[type="submit"] { opacity: 0.65; cursor: progress; } /* Typography plugin → theme tokens. The prose-gray/stone modifiers ship fixed gray palettes that break on dark-mode clubs; map every prose color role to the ink/muted tokens once so rich text follows the club theme everywhere. */ .prose { --tw-prose-body: var(--ink, #111827); --tw-prose-headings: var(--ink, #111827); --tw-prose-lead: var(--muted, #6b7280); --tw-prose-links: var(--color-primary-on-surface, #111827); --tw-prose-bold: var(--ink, #111827); --tw-prose-counters: var(--muted, #6b7280); --tw-prose-bullets: var(--muted, #6b7280); --tw-prose-hr: var(--line, #e5e7eb); --tw-prose-quotes: var(--ink, #111827); --tw-prose-quote-borders: var(--line, #e5e7eb); --tw-prose-captions: var(--muted, #6b7280); --tw-prose-code: var(--ink, #111827); --tw-prose-pre-code: var(--surface, #f9fafb); --tw-prose-pre-bg: var(--ink, #111827); --tw-prose-th-borders: var(--line, #e5e7eb); --tw-prose-td-borders: var(--line, #e5e7eb); }