@import "tailwindcss"; /* Brand theme — Tailwind v4 reads colour tokens from CSS custom properties via @theme. These map to BrandSetting#design_tokens, which is rendered into by BrandingHelper#brand_css_tag at request time. Changing brand colours in /admin/brand_setting takes effect on the next request — no CSS rebuild. Fallback values below are used during build (when Rails isn't running) and as a safety net if a token is ever missing. */ @theme { --color-brand-primary: var(--brand-primary, #0f8a5f); --color-brand-primary-dark: var(--brand-primary-dark, #0a6748); --color-brand-accent: var(--brand-accent, #16c172); --color-brand-surface: var(--brand-surface, #ffffff); --color-brand-surface-alt: var(--brand-surface-alt, #f4f8f6); --color-brand-ink: var(--brand-ink, #0b1a14); --color-brand-ink-muted: var(--brand-ink-muted, #4d6358); --font-sans: var(--brand-font-sans, "Inter", ui-sans-serif, system-ui, sans-serif); --font-display: var(--brand-font-display, "Plus Jakarta Sans", "Inter", sans-serif); } @layer base { html { color-scheme: light; } body { background-color: var(--color-brand-surface); color: var(--color-brand-ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; } } @layer components { .btn-primary { @apply inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-semibold bg-brand-primary text-white shadow-sm transition hover:bg-brand-primary-dark focus:outline-none focus:ring-2 focus:ring-brand-primary focus:ring-offset-2; } .btn-ghost { @apply inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-semibold bg-white text-brand-ink ring-1 ring-black/10 transition hover:bg-brand-surface-alt; } .btn-link { @apply inline-flex items-center gap-1 text-sm font-semibold text-brand-primary hover:text-brand-primary-dark; } .chip { @apply inline-flex items-center gap-1.5 rounded-full bg-brand-surface-alt px-3 py-1 text-xs font-medium text-brand-ink-muted ring-1 ring-black/5; } .card { @apply rounded-2xl bg-white shadow-sm ring-1 ring-black/5 transition; } .card-hover { @apply hover:shadow-md hover:-translate-y-0.5; } .prose-trust { color: var(--color-brand-ink); font-size: 1.0625rem; line-height: 1.75; } .prose-trust h2 { font-size: 1.5rem; font-weight: 600; margin-top: 1.75em; margin-bottom: .6em; letter-spacing: -0.01em; } .prose-trust h3 { font-size: 1.2rem; font-weight: 600; margin-top: 1.5em; margin-bottom: .5em; } .prose-trust p { margin: 1em 0; } .prose-trust ul { list-style: disc; padding-left: 1.5em; margin: 1em 0; } .prose-trust ol { list-style: decimal; padding-left: 1.5em; margin: 1em 0; } .prose-trust a { color: var(--color-brand-primary); text-decoration: underline; text-underline-offset: 3px; } .prose-trust a:hover { color: var(--color-brand-primary-dark); } .prose-trust strong { color: var(--color-brand-ink); font-weight: 600; } .prose-trust blockquote { border-left: 3px solid var(--color-brand-primary); padding-left: 1em; color: var(--color-brand-ink-muted); } .prose-trust code { background: var(--color-brand-surface-alt); padding: 1px 6px; border-radius: 4px; font-size: 0.875em; } }