/* ============================================ THEME BASE - Shared utilities for all themes ============================================ This file contains CSS that is IDENTICAL across all themes. Individual themes only need to define: - Font imports - :root palette variables (unique colors) - :root semantic variable mappings - light/dark overrides keyed by [data-theme] - Typography styles (heading weights, letter-spacing) - Nav/header/logo/toggle light-dark behavior - Hero/CTA background patterns - Prose dark mode overrides - Theme-specific decorative elements TWO SEPARATE COMPOSITION STEPS — do not conflate them: 1. Brand layering, done by the theme package itself. A brand theme concatenates @rizom/theme-default (the default brand values) and its own CSS, in src/index.ts and again in its published dist module. 2. Base layering, done once by the shell. brain-resolver calls withThemeBase() on the fully resolved theme (theme + site override + instance override) to prepend THIS file. A theme is only ever a CSS string; it never adds the base itself. LAYER ORDER — theme < theme-base < theme-override: `theme` is Tailwind's own layer, pre-declared by `@import "tailwindcss"` ahead of the two layers declared below, so it is the WEAKEST of the three. It is where every theme (and this file) puts custom properties, so tokens resolve by plain source order: base first, then theme-default, then the brand theme. Shared token defaults therefore belong in `theme`, not in `theme-base` — a default in `theme-base` would outrank every theme and could not be overridden. `theme-base` holds this file's shared utility classes; `theme-override` is where brand themes override them. [data-theme] is always present on : the site head renders it into the markup and an inline script re-asserts it before paint. Selectors here can rely on it rather than falling back to bare :root. ============================================ */ /* Declare layer order — guarantees cascade regardless of concat order */ @layer theme-base, theme-override; /* Custom variant: `light:*` utilities apply when [data-theme="light"] is set on any ancestor (typically ). Dark mode is the default so there's no matching `dark:` variant. */ @custom-variant light ([data-theme="light"] &); /* ============================================ @theme inline - Expose CSS variables to Tailwind Uses @theme inline for RUNTIME CSS variable resolution. The "inline" keyword is essential for dark mode / multi-site theming. ============================================ */ @theme inline { /* Layout */ --max-width-layout: var(--layout-max-width); /* Brand colors - same color for bg/text/border */ --color-brand: var(--color-brand); --color-brand-dark: var(--color-brand-dark); --color-brand-light: var(--color-brand-light); --color-accent: var(--color-accent); --color-accent-dark: var(--color-accent-dark); /* Selection colors */ --color-selection: var(--color-selection); /* Rule colors — subtle hairlines for dividers, entry borders, footer top */ --color-rule: var(--color-rule); --color-rule-strong: var(--color-rule-strong); /* Monospace font — used by ui-library widgets, code blocks, etc. Defined by every theme (or left empty for ranger). Brand-specific fonts (`font-display`, `font-body`, `font-label`, `font-nav`) and the typography scale live in the brand theme that uses them so non-brand themes don't ship broken utilities. */ --font-sans: var(--font-sans); --font-heading: var(--font-heading); --font-mono: var(--font-mono); /* Typography scale — each entry bundles font-size + line-height + letter-spacing via Tailwind v4's --text-name--line-height / --text-name--letter-spacing modifiers, so a single utility (e.g. `text-display-lg`) replaces three (`text-[clamp(...)] leading-[1.1] tracking-[-1px]`). Themes set the actual values in their :root block. */ /* Display — fluid headlines */ --text-display-2xl: var(--text-display-2xl); --text-display-2xl--line-height: 0.9; --text-display-2xl--letter-spacing: -2px; --text-display-xl: var(--text-display-xl); --text-display-xl--line-height: 0.95; --text-display-xl--letter-spacing: -3px; --text-display-lg: var(--text-display-lg); --text-display-lg--line-height: 1.1; --text-display-lg--letter-spacing: -1px; --text-display-md: var(--text-display-md); --text-display-md--line-height: 1.1; --text-display-md--letter-spacing: -1px; --text-display-sm: var(--text-display-sm); --text-display-sm--line-height: 1.2; --text-display-sm--letter-spacing: -0.5px; /* Heading — subsection labels. Deliberately NO bundled line-height: in the rizom mock these elements (eco-title, feature-title, problem-title) inherit the body's 1.6 line-height. They're emphasized labels, not display headings. Sites that want a tight leading override per use site with `leading-tight` etc. */ --text-heading-lg: var(--text-heading-lg); --text-heading-md: var(--text-heading-md); --text-heading-sm: var(--text-heading-sm); /* Body — paragraphs */ --text-body-xl: var(--text-body-xl); --text-body-xl--line-height: 1.7; --text-body-lg: var(--text-body-lg); --text-body-lg--line-height: 1.7; --text-body-md: var(--text-body-md); --text-body-md--line-height: 1.8; --text-body-sm: var(--text-body-sm); --text-body-sm--line-height: 1.7; --text-body-xs: var(--text-body-xs); --text-body-xs--line-height: 1.7; /* Label — small uppercase text. Letter-spacing is applied per-use (different label kinds have very different tracking). */ --text-label-md: var(--text-label-md); --text-label-sm: var(--text-label-sm); --text-label-xs: var(--text-label-xs); /* Section spacing — single fluid token, drives `py-section`, `pt-section`, `pb-section`, `gap-section`, etc. */ --spacing-section: var(--spacing-section); /* Footer */ --color-footer: var(--color-footer); --color-footer-text: var(--color-footer-text); /* Gradient colors */ --color-gradient-start: var(--color-gradient-start); --color-gradient-end: var(--color-gradient-end); /* Pattern colors */ --color-pattern-dot: var(--color-pattern-dot); /* Prose/Typography colors - for @tailwindcss/typography plugin */ --tw-prose-body: var(--color-text); --tw-prose-headings: var(--color-heading); --tw-prose-links: var(--color-brand); --tw-prose-bold: var(--color-text); --tw-prose-code: var(--color-text); --tw-prose-quotes: var(--color-text-muted); --tw-prose-counters: var(--color-text-muted); --tw-prose-bullets: var(--color-text-muted); } /* ============================================ Core theme utilities These CAN'T be auto-generated by @theme inline because different utilities need different variables. e.g. bg-theme uses --color-bg, text-theme uses --color-text ============================================ */ /* Status badge palette — one definition for every theme. * * Keyed off [data-theme] rather than :root because the site head always * writes the attribute onto (server-rendered into the markup and * re-asserted before paint). That lets dark-first themes and light-first * themes share these values instead of each restating a whole palette under * whichever selector happens to be their default. * * Declared in `theme` — Tailwind's own layer, where every theme puts its * custom properties — rather than `theme-base`. Tailwind pre-declares * `theme` ahead of the layers this file introduces, so a palette in * `theme-base` would outrank the themes and they could not override it. * Same layer means plain source order decides, and themes come after. */ @layer theme { [data-theme="light"] { --color-status-neutral-bg: #f0ece6; --color-status-neutral-text: #4b4652; --color-status-info-bg: #e7edf7; --color-status-info-text: #31527c; --color-status-success-bg: #e4f3e8; --color-status-success-text: #2d6a42; --color-status-danger-bg: #f8e4e4; --color-status-danger-text: #8f2f2f; --color-status-warning-bg: #f7edcf; --color-status-warning-text: #7a4a05; } [data-theme="dark"] { --color-status-neutral-bg: #374151; --color-status-neutral-text: #e5e7eb; --color-status-info-bg: #1e3a5f; --color-status-info-text: #93c5fd; --color-status-success-bg: #14532d; --color-status-success-text: #86efac; --color-status-danger-bg: #7f1d1d; --color-status-danger-text: #fca5a5; --color-status-warning-bg: #713f12; --color-status-warning-text: #fde68a; } } @layer theme-base { /* Theme utilities - bg uses --color-bg, text uses --color-text */ .bg-theme { background-color: var(--color-bg); } .bg-theme-subtle { background-color: var(--color-bg-subtle); } .bg-theme-muted { background-color: var(--color-bg-muted); } .bg-theme-dark { background-color: var(--color-bg-dark); } .bg-surface { background-color: var(--color-bg-subtle); } .text-theme { color: var(--color-text); } .text-theme-muted { color: var(--color-text-muted); } .text-theme-light { color: var(--color-text-light); } .text-theme-inverse { color: var(--color-text-inverse); } .text-theme-on-dark { color: var(--color-text-on-dark, var(--color-text-inverse)); } .text-heading { color: var(--color-heading); } .text-selection { color: var(--color-selection); } .border-theme { border-color: var(--color-border); } .border-theme-light { border-color: var(--color-border-light); } .placeholder-theme-muted::placeholder { color: var(--color-text-muted); } /* Status badge utilities */ .bg-status-neutral { background-color: var(--color-status-neutral-bg); } .text-status-neutral { color: var(--color-status-neutral-text); } .bg-status-info { background-color: var(--color-status-info-bg); } .text-status-info { color: var(--color-status-info-text); } .bg-status-success { background-color: var(--color-status-success-bg); } .text-status-success { color: var(--color-status-success-text); } .bg-status-danger { background-color: var(--color-status-danger-bg); } .text-status-danger { color: var(--color-status-danger-text); } .bg-status-warning { background-color: var(--color-status-warning-bg); } .text-status-warning { color: var(--color-status-warning-text); } /* Hover states for theme utilities */ .hover\:bg-theme-subtle:hover { background-color: var(--color-bg-subtle); } .hover\:bg-brand:hover { background-color: var(--color-brand); } .hover\:bg-brand-dark:hover { background-color: var(--color-brand-dark); } /* Complete gradient background - uses full gradient value, not single color */ .bg-theme-gradient { background: var(--color-bg-gradient); } /* Footer text color override */ .bg-footer .text-theme-inverse { color: var(--color-footer-text); } /* Text selection highlighting */ ::selection { background-color: var(--color-selection-bg); color: var(--color-selection-text); } /* Sticky-footer hygiene for site layouts that use flex-grow mains. */ body { min-height: 100dvh; display: flex; flex-direction: column; } /* Reusable editorial decoration hooks. Themes provide colors through semantic tokens; these classes only define layering and gradients. */ .hero-decor, .cta-decor { position: relative; overflow: hidden; isolation: isolate; } .hero-decor > *, .cta-decor > * { position: relative; z-index: 1; } .hero-decor::before, .hero-decor::after, .cta-decor::before, .cta-decor::after { content: ""; position: absolute; pointer-events: none; z-index: 0; } .hero-decor::before { inset: -30% -20% auto; height: 120%; background: radial-gradient(circle at 50% 20%, rgb(from var(--color-accent) r g b / 0.5), transparent 28%), radial-gradient(circle at 68% 38%, rgb(from var(--color-brand-dark) r g b / 0.35), transparent 36%); filter: blur(8px); } .hero-decor::after, .cta-decor::before { inset: 0; opacity: 0.12; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); } .cta-decor::after { width: min(48rem, 70vw); aspect-ratio: 1; right: -18rem; bottom: -28rem; border-radius: 9999px; background: radial-gradient(circle, rgb(from var(--color-brand) r g b / 0.42), transparent 66%); filter: blur(6px); } .pulse-sparkle { animation: hero-pulse 2.8s ease-in-out infinite; } @keyframes hero-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); box-shadow: 0 0 0 0 rgb(from var(--color-accent) r g b / 0.28); } 50% { opacity: 1; transform: scale(1.18); box-shadow: 0 0 0 10px rgb(from var(--color-accent) r g b / 0); } } } /* ============================================ Gradient utilities - Tailwind v4 format ============================================ */ @layer theme-base { .from-gradient-start { --tw-gradient-from: var(--color-gradient-start); --tw-gradient-to: rgb(from var(--color-gradient-start) r g b / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-gradient-end { --tw-gradient-to: var(--color-gradient-end); } .from-accent { --tw-gradient-from: var(--color-accent); --tw-gradient-to: rgb(from var(--color-accent) r g b / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-accent-dark { --tw-gradient-to: var(--color-accent-dark); } .from-brand-dark { --tw-gradient-from: var(--color-brand-dark); --tw-gradient-to: rgb(from var(--color-brand-dark) r g b / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-brand-light { --tw-gradient-from: var(--color-brand-light); --tw-gradient-to: rgb(from var(--color-brand-light) r g b / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-brand { --tw-gradient-to: var(--color-brand); } .to-theme { --tw-gradient-to: var(--color-bg); } } /* ============================================ Status colors (warning / success / danger / info) — SHARED across themes. These are universal UI signals (not brand colors) so they live here and every theme inherits them. A theme can still override individual --color-warning-* values if it wants brand-flavored variants, but the sensible defaults are right here. ============================================ */ :root { --palette-warning: #CA8A04; /* base yellow (dark mode bg/border) */ --palette-warning-text: #FDE047; /* dark-mode text */ --palette-warning-text-emphasis: #FEF08A; /* dark-mode heavy text */ --palette-warning-bg-light: #FEFCE8; /* light-mode bg */ --palette-warning-border-light: #FDE047; /* light-mode border */ --palette-warning-text-light: #854D0E; /* light-mode text */ --palette-warning-text-emphasis-light: #92400E; /* Dark-mode defaults */ --color-warning-bg: rgb(from var(--palette-warning) r g b / 0.2); --color-warning-border: rgb(from var(--palette-warning) r g b / 0.5); --color-warning-text: var(--palette-warning-text); --color-warning-text-emphasis: var(--palette-warning-text-emphasis); } [data-theme="light"] { --color-warning-bg: var(--palette-warning-bg-light); --color-warning-border: var(--palette-warning-border-light); --color-warning-text: var(--palette-warning-text-light); --color-warning-text-emphasis: var(--palette-warning-text-emphasis-light); } @layer theme-base { .bg-warning { background-color: var(--color-warning-bg); } .border-warning { border-color: var(--color-warning-border); } .text-warning { color: var(--color-warning-text); } .text-warning-emphasis { color: var(--color-warning-text-emphasis); } } /* ============================================ Theme toggle icon visibility ============================================ */ @layer theme-base { [data-theme="dark"] .sun-icon { display: none; } [data-theme="dark"] .moon-icon { display: block; } [data-theme="light"] .sun-icon { display: block; } [data-theme="light"] .moon-icon { display: none; } } /* * Default theme — simplified editorial base inspired by the Rizom family. * * This theme is intentionally less branded than @brains/theme-rizom. It * defines the shared visual defaults for generic/personal/professional sites: * warm paper surfaces, ink text, restrained amber accent, and a compact * editorial type system. @brains/theme-rizom layers its full brand palette, * profile variants, and product-site utilities on top of this baseline. */ @import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..900,30..100;1,9..144,300..900,30..100&display=swap"); @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"); /* Compatibility aliases for shared Rizom UI sections used on generic professional/default sites. These keep components such as Ecosystem color-correct without requiring each standalone site to add a local theme shim. */ @theme inline { --font-display: var(--font-heading); --font-body: var(--font-sans); --font-label: var(--font-mono); --color-secondary: var(--color-secondary); --color-secondary-dark: var(--color-secondary-dark); --color-accent-bright: var(--color-accent-bright); } @layer theme { :root { /* Layout */ --layout-max-width: 72rem; --spacing-section: clamp(4rem, 8vw, 7rem); --radius-lg: 0.875rem; /* Palette — warm neutral base with restrained Rizom-adjacent accents. */ --palette-paper: #f4ede0; --palette-paper-soft: #faf4e6; --palette-paper-muted: #ebe2cb; --palette-paper-deep: #e3d9bf; --palette-ink: #18132a; --palette-ink-muted: #443c54; --palette-ink-subtle: #756c80; --palette-border: #ddd2c4; --palette-white: #ffffff; --palette-amber: #b8410c; --palette-amber-dark: #923208; --palette-amber-light: #ff8b3d; --palette-purple: #4b2a63; --palette-purple-dark: #22152e; --palette-dark-bg: #0a0819; --palette-dark-bg-subtle: #14112b; --palette-dark-bg-muted: #1b1638; --palette-dark-bg-deep: #05040f; --palette-dark-border: rgb(255 255 255 / 0.12); /* Semantic colors — single warm-flame brand */ --color-brand: var(--palette-amber); --color-brand-dark: var(--palette-amber-dark); --color-brand-light: var(--palette-amber-light); --color-accent: var(--palette-amber); --color-accent-dark: var(--palette-amber-dark); --color-accent-soft: rgb(from var(--color-accent) r g b / 0.08); --color-accent-bright: var(--palette-amber-light); --color-secondary: var(--palette-purple); --color-secondary-dark: var(--palette-purple-dark); --color-text: var(--palette-ink); --color-text-muted: var(--palette-ink-muted); --color-text-light: var(--palette-ink-subtle); --color-text-inverse: var(--palette-paper-soft); --color-text-on-dark: var(--palette-paper-soft); --color-heading: var(--palette-ink); --color-bg: var(--palette-paper); --color-bg-subtle: var(--palette-paper-soft); --color-bg-muted: var(--palette-paper-muted); --color-bg-dark: var(--palette-purple-dark); --color-bg-deep: var(--palette-paper-deep); --color-border: var(--palette-border); --color-border-light: rgb(255 255 255 / 0.72); --color-rule: rgb(from var(--color-text) r g b / 0.07); --color-rule-strong: rgb(from var(--color-text) r g b / 0.14); --color-footer: var(--palette-paper-soft); --color-footer-text: var(--palette-ink-muted); --color-logo: var(--color-brand); --color-selection: var(--color-accent); --color-selection-bg: rgb(196 90 8 / 0.18); --color-selection-text: var(--palette-ink); --color-gradient-start: var(--palette-paper-soft); --color-gradient-end: var(--palette-paper-muted); --color-bg-gradient: linear-gradient( 180deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100% ); --color-pattern-dot: rgb(75 42 99 / 0.12); /* Status badge colours live in @brains/theme-base, keyed by [data-theme]. */ /* Typography */ --font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif; --font-heading: "Fraunces", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Shared type scale consumed by theme-base utilities. */ --text-display-2xl: clamp(4.5rem, 8vw, 7.5rem); --text-display-xl: clamp(3.5rem, 7vw, 6.5rem); --text-display-lg: clamp(2.75rem, 5vw, 4.5rem); --text-display-md: clamp(2.1rem, 4vw, 3.25rem); --text-display-sm: clamp(1.75rem, 3vw, 2.5rem); --text-heading-lg: clamp(1.5rem, 2vw, 2rem); --text-heading-md: clamp(1.25rem, 1.6vw, 1.625rem); --text-heading-sm: clamp(1.1rem, 1.3vw, 1.25rem); --text-body-xl: clamp(1.25rem, 1.8vw, 1.5rem); --text-body-lg: clamp(1.125rem, 1.5vw, 1.25rem); --text-body-md: 1rem; --text-body-sm: 0.9375rem; --text-body-xs: 0.8125rem; --text-label-md: 0.875rem; --text-label-sm: 0.75rem; --text-label-xs: 0.6875rem; /* Legacy type tokens still referenced by older components/prototypes. */ --text-h1: var(--text-display-xl); --text-h1-mobile: 3.75rem; --text-h2: var(--text-display-lg); --text-h2-mobile: 3rem; --text-h3: var(--text-display-md); --text-h3-mobile: 2.25rem; --text-h4: 1.875rem; --text-body: 1.125rem; --text-body-mobile: 1rem; } [data-theme="dark"] { --color-brand: var(--palette-amber-light); --color-brand-dark: var(--palette-amber); --color-brand-light: #ffa46a; --color-accent: var(--palette-amber-light); --color-accent-dark: var(--palette-amber); --color-accent-soft: rgb(from var(--color-accent) r g b / 0.12); --color-accent-bright: #f3c14f; --color-secondary: #8c82c8; --color-secondary-dark: var(--palette-purple); --color-text: var(--palette-paper-soft); --color-text-muted: rgb(251 247 239 / 0.68); --color-text-light: rgb(251 247 239 / 0.46); --color-text-inverse: var(--palette-dark-bg); --color-text-on-dark: var(--palette-paper-soft); --color-heading: var(--palette-paper-soft); --color-bg: var(--palette-dark-bg); --color-bg-subtle: var(--palette-dark-bg-subtle); --color-bg-muted: var(--palette-dark-bg-muted); --color-bg-dark: #080611; --color-bg-deep: var(--palette-dark-bg-deep); --color-border: var(--palette-dark-border); --color-border-light: rgb(255 255 255 / 0.18); --color-footer: var(--palette-dark-bg-deep); --color-footer-text: rgb(251 247 239 / 0.7); --color-logo: var(--palette-paper-soft); --color-selection: var(--color-accent); --color-selection-bg: rgb(255 139 61 / 0.18); --color-selection-text: var(--palette-paper-soft); --color-gradient-start: var(--palette-dark-bg-subtle); --color-gradient-end: var(--palette-dark-bg); --color-bg-gradient: linear-gradient( 180deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100% ); --color-pattern-dot: rgb(255 255 255 / 0.08); } } @layer theme-override { .text-nav { color: var(--color-text-muted); } .text-nav:hover { color: var(--color-brand); } .text-logo { color: var(--color-logo); } .nav-link { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-muted); padding: 0.4rem 0; border-bottom: 1px solid transparent; transition: color 120ms ease, border-color 120ms ease; } .nav-link:hover { color: var(--color-text); border-bottom-color: var(--color-accent); } .hero-bg-pattern { background: radial-gradient( 60% 70% at 80% 20%, var(--color-accent-soft), transparent 70% ), var(--color-bg); } .cta-bg-pattern { background: radial-gradient( 50% 60% at 20% 80%, var(--color-accent-soft), transparent 70% ), var(--color-bg-deep); } .section-divider { height: 1px; background-color: rgb(from var(--color-text) r g b / 0.07); } .bg-header { background-color: rgb(from var(--color-bg) r g b / 0.88); backdrop-filter: blur(12px); } .bg-footer { background-color: var(--color-footer); } .text-footer { color: var(--color-footer-text); } .bg-theme-toggle { background-color: var(--color-bg-muted); } .bg-theme-toggle-hover { background-color: var(--color-brand); } .text-theme-toggle-icon { color: var(--color-text); } .bg-theme-toggle-hover .text-theme-toggle-icon { color: var(--color-text-inverse); } } @layer theme-override { .prose { color: var(--color-text); font-family: var(--font-sans); } .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: var(--color-heading); font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.025em; } .prose h1 { font-size: clamp(2.75rem, 6vw, 5rem); line-height: 0.98; } .prose h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; border-bottom: none; text-decoration: none; } .prose h3 { font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.15; } .prose h4 { font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.2; } .prose h5, .prose h6 { font-size: 1.125rem; line-height: 1.3; } .prose p, .prose li { color: var(--color-text); } .prose strong { color: var(--color-heading); } .prose em { color: var(--color-accent); } .prose a { color: var(--color-brand); } .prose a:hover { color: var(--color-brand-dark); } .prose code { color: var(--color-text); background-color: var(--color-bg-muted); } .prose pre { background-color: var(--color-bg-muted); color: var(--color-text); } .prose cite.block-attribution { display: block; font-size: 1rem; font-weight: 400; font-style: normal; color: var(--color-text-muted); margin-top: 0.5rem; margin-bottom: 2rem; padding-left: 0; } .prose cite.block-attribution .emdash { color: var(--color-brand); margin-right: 0.125rem; } .prose cite.block-attribution a { color: var(--color-text-muted); text-decoration: underline; } .prose cite.block-attribution a:hover { color: var(--color-brand); } } @layer theme-override { .focus-ring { @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2; } .focus-ring-light { @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-brand; } } @layer theme-override { .form-input { padding: 0.5rem 1rem; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background-color: var(--color-bg); color: var(--color-text); transition-property: color, background-color, border-color, box-shadow; transition-duration: 150ms; } .form-input::placeholder { color: var(--color-text-muted); } .form-input:focus { outline: none; box-shadow: 0 0 0 2px var(--color-brand); } .form-input:disabled { opacity: 0.5; } .btn-primary { padding: 0.5rem 1rem; border-radius: var(--radius-lg); background-color: var(--color-brand); color: var(--color-text-inverse); font-weight: 600; transition-property: color, background-color, border-color, transform; transition-duration: 150ms; } .btn-primary:hover { background-color: var(--color-brand-dark); transform: translateY(-1px); } .btn-primary:disabled { opacity: 0.5; } }