/* * Naabrent design tokens -- "Naaber garden" refresh (docs/design/visual-refresh.md). * Light theme only in v1; structured so a dark theme can be added later * without touching component code (ADR-0004). Every foreground/background * pairing is WCAG AA verified in visual-refresh.md. */ :root { /* Light-only in v1 (ADR-0004): lock the UA colour scheme so native form controls, scrollbars, and the browser's auto-dark heuristics don't invert against our fixed light surfaces. Paired with data-theme=light on . */ color-scheme: light; /* ---- Brand: sage green (softened 2026-07-11; was vivid #2E7D4E) ---- All pairings re-verified WCAG AA: white on primary 5.3, primary on the cream page 4.82, ink on tint-50 8.4, white on strong 12.4. */ --color-primary: #47755A; --color-primary-hover: #3D6650; --color-primary-active: #345644; --color-primary-ink: #2E4C3B; --color-primary-strong: #22392C; /* deep sage: landing CTA band */ --color-primary-50: #EDF3EF; --color-primary-100: #CFE0D5; /* ---- Secondary: terracotta ---- */ --color-secondary: #B0522E; --color-secondary-hover: #983F24; --color-secondary-ink: #8F3E22; --color-secondary-50: #FBEEE7; --color-secondary-100: #F2D3C4; /* ---- Amber (ratings / verified only) ---- */ --color-accent: #C4841B; /* alias kept for existing CSS */ --color-amber: #C4841B; /* star / check glyphs (UI/large) */ --color-amber-ink: #8A5A0F; /* small amber text */ --color-accent-50: #FBF0D9; /* alias */ --color-amber-50: #FBF0D9; /* ---- Surfaces ---- */ --surface-page: #F6F4EC; --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #EFEBDF; --surface-muted: #F1EFE6; /* ---- Text ---- */ --text-primary: #212B24; --text-secondary: #4F5A51; --text-muted: #5D6861; /* ≥4.5:1 on all page/muted surfaces, incl. small text */ --text-on-primary: #FFFFFF; /* ---- Lines & focus ---- */ --border: #E4E0D3; --border-strong: #CFC9BA; --focus-ring: #345644; /* ---- Semantic ---- */ --success: #1E7A45; --success-ink: #155C33; --success-50: #E7F4EC; --warning: #B4740E; --warning-ink: #7E5108; --warning-50: #FBF0D9; --danger: #B23B2E; --danger-ink: #8E2C21; --danger-50: #F8E5E2; --info: #1F6F8B; --info-ink: #155268; --info-50: #E3F0F4; /* ---- Type scale ---- */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --measure: 66ch; /* ---- Spacing ---- */ --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 ---- */ --radius-control: 10px; --radius-card: 16px; --radius-pill: 999px; /* ---- Elevation ---- */ --shadow-sm: 0 1px 2px rgba(20,40,28,0.06), 0 1px 1px rgba(20,40,28,0.04); --shadow-md: 0 2px 4px rgba(20,40,28,0.07), 0 4px 12px rgba(20,40,28,0.06); --shadow-lg: 0 8px 24px rgba(20,40,28,0.12); --shadow-card: var(--shadow-sm); /* alias kept for existing CSS */ /* ---- Pico theme mapping (class-light, ADR-0004) ---- */ --pico-primary: var(--color-primary); --pico-primary-background: var(--color-primary); --pico-primary-hover: var(--color-primary-hover); --pico-primary-hover-background:var(--color-primary-hover); --pico-primary-underline: var(--color-primary); --pico-primary-focus: rgba(52,86,68,0.35); --pico-secondary: var(--color-secondary); --pico-secondary-background: var(--color-secondary); --pico-secondary-hover: var(--color-secondary-hover); --pico-background-color: var(--surface-page); --pico-color: var(--text-primary); --pico-h1-color: var(--text-primary); --pico-h2-color: var(--text-primary); --pico-h3-color: var(--text-primary); --pico-muted-color: var(--text-muted); --pico-muted-border-color: var(--border); --pico-card-background-color: var(--surface-card); --pico-card-border-color: var(--border); --pico-card-box-shadow: var(--shadow-sm); --pico-border-radius: var(--radius-control); --pico-font-family: var(--font-sans); --pico-font-size: var(--fs-base); --pico-form-element-focus-color:rgba(52,86,68,0.35); } /* * Pico v2 declares its own theme variables under `:root:not([data-theme=dark])` * (specificity 0,2,0), which beats the plain `:root` block above (0,1,0) — so * without this, primary buttons and links fell back to Pico's default blue * (#0172AD) instead of the brand green, contradicting ADR-0004. Re-assert the * brand mapping at matching specificity (and later in the cascade) so actions * render green. Light-only in v1; a dark theme would add its own block. */ :root:not([data-theme="dark"]) { --pico-primary: var(--color-primary); --pico-primary-background: var(--color-primary); --pico-primary-hover: var(--color-primary-hover); --pico-primary-hover-background:var(--color-primary-hover); --pico-primary-underline: var(--color-primary); --pico-primary-focus: rgba(52, 86, 68, 0.35); --pico-secondary: var(--color-secondary); --pico-secondary-background: var(--color-secondary); --pico-secondary-hover: var(--color-secondary-hover); --pico-secondary-hover-background: var(--color-secondary-hover); }