/* ============================================================================ * SEOGrove Theme * * SINGLE SOURCE OF TRUTH for all color and visual tokens in the application. * Nothing else in the app should hardcode a color value. If you need a color * that doesn't exist here yet, add it here first. * * Switching themes (dark mode, rebrand, white-label) should be a change to * this file and nothing else. * * ------------------------------------------------------------------------ * Naming convention * ------------------------------------------------------------------------ * --color-- * * Roles describe *purpose*, not appearance. Prefer --color-surface over * --color-white, --color-accent over --color-green. This is what lets us * reskin later without touching templates. * * Variants: default (no suffix), muted, strong, inverted. * * ------------------------------------------------------------------------ * Tailwind v4 integration * ------------------------------------------------------------------------ * The @theme block below makes each token available as a Tailwind utility. * So `--color-surface` becomes `bg-surface`, `text-surface`, etc. * Use Tailwind classes in templates — never inline hex values. * ========================================================================= */ :root { /* Light/dark: each token is light-dark(, ). The active mode * comes from `color-scheme`, which sets below. Elements * can opt into a mode locally with `color-scheme: dark` (see the * appearance picker on the account page). */ color-scheme: light; /* Brand — SEOGrove's signature green. Trust, growth, organic traffic. */ --color-brand: oklch(0.64 0.17 152); /* primary brand green */ --color-brand-strong: light-dark(oklch(0.54 0.18 152), oklch(0.72 0.16 152)); /* hover / emphasis: darker on light, brighter on dark */ --color-brand-muted: light-dark(oklch(0.92 0.05 152), oklch(0.29 0.06 155)); /* subtle brand tint */ /* Accent — warm counterpoint used sparingly for CTAs and highlights */ --color-accent: light-dark(oklch(0.72 0.15 60), oklch(0.76 0.14 65)); --color-accent-strong: light-dark(oklch(0.62 0.16 60), oklch(0.80 0.13 65)); /* Surfaces — backgrounds, layered from deepest to lightest. * Dark mode is "the grove at night": green-tinted charcoal, never pure black. */ --color-canvas: light-dark(oklch(0.985 0.003 150), oklch(0.165 0.012 165)); /* page background */ --color-surface: light-dark(oklch(1 0 0), oklch(0.205 0.013 165)); /* cards, panels */ --color-surface-raised: light-dark(oklch(0.99 0.003 150), oklch(0.235 0.014 165)); /* modals, popovers */ --color-surface-sunken: light-dark(oklch(0.96 0.005 150), oklch(0.185 0.012 165)); /* wells, input backgrounds */ /* Text — hierarchical */ --color-text: light-dark(oklch(0.24 0.02 250), oklch(0.95 0.006 150)); /* primary body text */ --color-text-muted: light-dark(oklch(0.48 0.015 250), oklch(0.76 0.012 160)); /* secondary / captions */ --color-text-subtle: light-dark(oklch(0.62 0.01 250), oklch(0.60 0.012 160)); /* tertiary / placeholders */ --color-text-inverted: light-dark(oklch(0.98 0 0), oklch(0.17 0.012 165)); /* on bg-text surfaces */ /* Borders and dividers */ --color-border: light-dark(oklch(0.90 0.01 250), oklch(0.29 0.014 165)); --color-border-strong: light-dark(oklch(0.82 0.015 250), oklch(0.37 0.016 165)); /* Status — feedback for pipeline jobs, form validation, citations */ --color-success: light-dark(oklch(0.68 0.17 150), oklch(0.73 0.16 150)); --color-warning: light-dark(oklch(0.78 0.16 80), oklch(0.82 0.15 85)); --color-danger: light-dark(oklch(0.62 0.22 27), oklch(0.68 0.19 25)); --color-info: light-dark(oklch(0.66 0.14 240), oklch(0.72 0.12 240)); /* Topic hues — categorical colours for keyword topics (calendar chips, topic mix). * Cycled by index, so a seventh topic reuses --color-topic-1. */ --color-topic-1: light-dark(oklch(0.58 0.13 200), oklch(0.72 0.11 200)); --color-topic-2: light-dark(oklch(0.60 0.14 152), oklch(0.74 0.14 152)); --color-topic-3: light-dark(oklch(0.58 0.15 300), oklch(0.74 0.12 300)); --color-topic-4: light-dark(oklch(0.66 0.14 60), oklch(0.78 0.12 65)); --color-topic-5: light-dark(oklch(0.58 0.16 350), oklch(0.72 0.13 350)); --color-topic-6: light-dark(oklch(0.55 0.10 260), oklch(0.72 0.09 260)); --color-warning-surface: light-dark(oklch(0.97 0.04 85), oklch(0.28 0.05 80)); /* tinted background for items needing attention */ /* Documentation code samples */ --color-code-surface: oklch(0.16 0.015 250); --color-code-text: oklch(0.88 0.01 250); --color-code-key: oklch(0.78 0.13 152); --color-code-string: oklch(0.82 0.09 60); --color-code-number: oklch(0.75 0.10 240); --color-code-comment: oklch(0.58 0.01 250); --color-code-header: oklch(0.72 0.12 300); --color-code-keyword: oklch(0.72 0.14 152); /* Footer */ --color-footer-surface: oklch(0.17 0.05 155); --color-footer-border: oklch(0.28 0.06 155); --color-footer-divider: oklch(0.26 0.05 155); --color-footer-brand: oklch(0.78 0.15 152); --color-footer-text: oklch(0.62 0.05 155); --color-footer-heading: oklch(0.42 0.06 155); --color-footer-link: oklch(0.72 0.07 155); --color-footer-link-hover: oklch(0.88 0.12 152); --color-footer-subtle: oklch(0.42 0.05 155); --color-footer-muted: oklch(0.36 0.05 155); --color-footer-accent: oklch(0.55 0.10 152); /* App sidebar — signed-in navigation, shares the footer's forest tone. * In dark mode it sinks below the canvas so content stays the brightest layer. */ --color-sidebar: light-dark(oklch(0.17 0.05 155), oklch(0.13 0.022 160)); --color-sidebar-raised: light-dark(oklch(0.22 0.05 155), oklch(0.18 0.03 160)); /* switcher, cards, hover */ --color-sidebar-active: light-dark(oklch(0.28 0.06 155), oklch(0.24 0.05 155)); /* current page */ --color-sidebar-border: light-dark(oklch(0.31 0.06 155), oklch(0.24 0.025 160)); --color-sidebar-text: oklch(0.96 0.01 155); --color-sidebar-muted: oklch(0.82 0.03 155); /* nav links */ --color-sidebar-subtle: oklch(0.68 0.04 155); /* group labels, meta */ --color-sidebar-brand: oklch(0.80 0.15 152); /* wordmark, live dot */ /* Elevation — shadows (deeper and blacker on dark, where grey haze reads as fog) */ --shadow-sm: 0 1px 2px 0 light-dark(oklch(0.2 0.02 250 / 0.05), oklch(0 0 0 / 0.3)); --shadow-md: 0 4px 6px -1px light-dark(oklch(0.2 0.02 250 / 0.08), oklch(0 0 0 / 0.35)), 0 2px 4px -2px light-dark(oklch(0.2 0.02 250 / 0.06), oklch(0 0 0 / 0.3)); --shadow-lg: 0 10px 15px -3px light-dark(oklch(0.2 0.02 250 / 0.10), oklch(0 0 0 / 0.45)), 0 4px 6px -4px light-dark(oklch(0.2 0.02 250 / 0.08), oklch(0 0 0 / 0.35)); /* Radius — one scale, used everywhere */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 0.875rem; --radius-xl: 1.25rem; } /* Theme selection — , set from the * `theme` cookie (ApplicationHelper#theme_preference). */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="system"] { color-scheme: light dark; } /* Tailwind v4 — expose tokens as utilities (bg-brand, text-text-muted, etc.) */ @theme { --color-brand: var(--color-brand); --color-brand-strong: var(--color-brand-strong); --color-brand-muted: var(--color-brand-muted); --color-accent: var(--color-accent); --color-accent-strong: var(--color-accent-strong); --color-canvas: var(--color-canvas); --color-surface: var(--color-surface); --color-surface-raised: var(--color-surface-raised); --color-surface-sunken: var(--color-surface-sunken); --color-text: var(--color-text); --color-text-muted: var(--color-text-muted); --color-text-subtle: var(--color-text-subtle); --color-text-inverted: var(--color-text-inverted); --color-border: var(--color-border); --color-border-strong: var(--color-border-strong); --color-success: var(--color-success); --color-warning: var(--color-warning); --color-danger: var(--color-danger); --color-info: var(--color-info); --color-warning-surface: var(--color-warning-surface); --color-sidebar: var(--color-sidebar); --color-sidebar-raised: var(--color-sidebar-raised); --color-sidebar-active: var(--color-sidebar-active); --color-sidebar-border: var(--color-sidebar-border); --color-sidebar-text: var(--color-sidebar-text); --color-sidebar-muted: var(--color-sidebar-muted); --color-sidebar-subtle: var(--color-sidebar-subtle); --color-sidebar-brand: var(--color-sidebar-brand); --radius-sm: var(--radius-sm); --radius-md: var(--radius-md); --radius-lg: var(--radius-lg); --radius-xl: var(--radius-xl); }