/* ============================================================ VILLAGE DESIGN SYSTEM — shared token schema + component CSS Ported 1:1 from each design kit's "Village Design System.html". (Never write a glob path with star-slash inside a CSS comment — the star-slash closes the comment early and the parser then eats the next rule. That exact bug broke prod styling on 2026-07-02.) One component set. A vertical = a THEME (token values) set via data-theme on . Zero component changes to reskin. Tailwind v4 note: each app bridges these tokens into its Tailwind theme (see globals.css in the app), so utilities and these component classes resolve to the SAME CSS variables. ============================================================ */ /* ---- SCHEMA: stable names, every vertical ---- NOTE: deliberately NOT a bare `:root` selector — Tailwind v4 hoists custom props from bare :root rules in imported CSS into its @theme, where namespace resets/defaults mangle them (broke prod 2026-07-02). The compound selector keeps this block out of Tailwind's hands. */ :root, [data-theme] { --font-sans: var(--font-geist), "Geist", ui-sans-serif, system-ui, sans-serif; --font-serif: var(--font-instrument), "Instrument Serif", Georgia, serif; --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, monospace; --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 4rem; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(38,36,26,.05), 0 2px 8px rgba(38,36,26,.04); --shadow-md: 0 1px 2px rgba(38,36,26,.05), 0 14px 36px rgba(38,36,26,.10); --shadow-lg: 0 2px 6px rgba(38,36,26,.06), 0 34px 80px rgba(38,36,26,.16); } /* ---- THEME: TendVillage (default) — warm, neighborly, safe ---- */ :root, [data-theme="tend"] { --color-bg: #F1F0E6; --color-surface: #FCFBF4; --color-surface-2: #E9E7D7; --color-text: #26241A; --color-text-muted: #575344; --color-text-subtle: #8A8674; --color-border: rgba(38,36,26,.12); --color-border-strong: rgba(38,36,26,.22); --color-primary: #5F7A4E; --color-primary-hover: #4A633C; --color-primary-contrast: #FFFFFF; --color-primary-soft: #DCE4CE; --color-secondary: #C29F4D; --color-secondary-soft: #EFE1C0; --color-success: #3C7D4E; --color-danger: #B4432E; --color-warning: #C58A2B; --color-focus-ring: #9DB588; } /* ---- THEME: RoostVillage — home search, data-forward ---- */ [data-theme="roost"] { --color-bg: #F4EEE3; --color-surface: #FCFAF4; --color-surface-2: #EBE2D2; --color-text: #28211A; --color-text-muted: #5C5347; --color-text-subtle: #8C8273; --color-border: rgba(40,33,26,.12); --color-border-strong: rgba(40,33,26,.22); --color-primary: #C8842E; --color-primary-hover: #A8641C; --color-primary-contrast: #FFFFFF; --color-primary-soft: #F0DDBE; --color-secondary: #5F7A4E; --color-secondary-soft: #D9E0CC; --color-success: #3C7D4E; --color-danger: #B4432E; --color-warning: #C58A2B; --color-focus-ring: #E0A95A; } /* ============================================================ SHARED COMPONENTS — styled ONLY with the tokens above ============================================================ */ * { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; line-height: 1.5; } a { color: inherit; text-decoration: none; } .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; padding-right: .06em; } .mono { font-family: var(--font-mono); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 1px solid transparent; font: inherit; font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: .16s; text-decoration: none; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); } .btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); } .btn--primary:hover { background: var(--color-primary-hover); } .btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); } .btn--secondary:hover { background: var(--color-surface-2); } .btn--ghost { background: transparent; color: var(--color-text); } .btn--ghost:hover { background: var(--color-surface-2); } .btn--sm { height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); } .btn--danger { background: var(--color-danger); color: #fff; } .btn[disabled] { opacity: .55; cursor: not-allowed; } /* Inputs / fields */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field > label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); } .input { min-height: 48px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); padding: 0 var(--space-4); font: inherit; font-size: var(--text-base); color: var(--color-text); display: flex; align-items: center; gap: var(--space-3); } .input input, .input select { border: 0; background: transparent; outline: 0; font: inherit; flex: 1; color: inherit; width: 100%; height: 46px; } .input input::placeholder { color: var(--color-text-subtle); } .input:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); } .input--area { padding: var(--space-3) var(--space-4); } .input--area textarea { border: 0; background: transparent; outline: 0; font: inherit; flex: 1; color: inherit; width: 100%; resize: vertical; min-height: 96px; } .field .help { font-size: var(--text-xs); color: var(--color-text-subtle); } .field .error { font-size: var(--text-xs); color: var(--color-danger); } /* Card */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); } /* Badge / verification pills */ .pill { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); } .pill--verified { background: var(--color-primary-soft); color: var(--color-primary-hover); border-color: transparent; } .pill--verified::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); box-shadow: inset 0 0 0 2px var(--color-primary-soft); } .pill--secondary { background: var(--color-secondary-soft); color: #7a5f18; border-color: transparent; } .pill--ghost { background: transparent; } /* Provider card */ .pcard { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: .22s; color: inherit; text-decoration: none; } .pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); } .pcard__media { aspect-ratio: 3/2; position: relative; background: repeating-linear-gradient(135deg, var(--color-primary-soft) 0 8px, var(--color-surface-2) 8px 16px); background-size: cover; background-position: center; } .pcard__fav { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in oklab, var(--color-surface) 88%, transparent); border: 0; cursor: pointer; display: grid; place-items: center; color: var(--color-text-muted); box-shadow: var(--shadow-sm); } .pcard__pills { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; } .pcard__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); } .pcard__row { display: flex; justify-content: space-between; align-items: baseline; } .pcard__name { font-weight: 600; font-size: var(--text-lg); } .pcard__rate { font-weight: 600; } .pcard__rate small { font-weight: 400; color: var(--color-text-subtle); font-size: var(--text-xs); } .pcard__meta { font-size: var(--text-sm); color: var(--color-text-muted); } .pcard__desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 6px; line-height: 1.45; } .pcard__foot { display: flex; align-items: center; gap: 8px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-sm); } .stars { color: var(--color-secondary); font-weight: 600; } /* Search / filter bar */ .filterbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-2); box-shadow: var(--shadow-sm); } .fpill { display: inline-flex; align-items: center; gap: var(--space-2); height: 38px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--color-border); font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); cursor: pointer; } .fpill:hover { border-color: var(--color-primary); } .fpill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); } .fpill--on { background: var(--color-text); color: var(--color-bg); border-color: transparent; } .fpill--grow { flex: 1; min-width: 160px; justify-content: flex-start; color: var(--color-text-subtle); } /* Modal */ .modal { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); width: 420px; max-width: 100%; padding: var(--space-8); } .modal h3 { margin: 0 0 var(--space-2); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.02em; } .modal p { margin: 0 0 var(--space-6); color: var(--color-text-muted); } .modal__row { display: flex; gap: var(--space-3); } .modal__scrim { position: fixed; inset: 0; z-index: 60; background: color-mix(in oklab, var(--color-text) 30%, transparent); display: grid; place-items: center; padding: var(--space-4); } /* Toast */ .toast { display: flex; align-items: center; gap: var(--space-3); background: var(--color-text); color: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-md); font-size: var(--text-sm); font-weight: 500; } .toast--good::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-success) 35%, transparent); } .toast--bad::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-danger) 35%, transparent); } .toast-stack { position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--space-3); z-index: 80; padding: 0 var(--space-4); } /* Header / nav */ .appbar { display: flex; align-items: center; gap: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); box-shadow: var(--shadow-sm); } .appbar__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; letter-spacing: -.02em; font-size: var(--text-lg); } .appbar__brand .leaf { width: 16px; height: 16px; border-radius: 50% 50% 50% 0; background: var(--color-primary); transform: rotate(-30deg); } .appbar__brand .v { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--color-primary); } .appbar__links { display: flex; gap: 2px; margin-left: auto; } .appbar__links a { padding: 8px 14px; border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; } .appbar__links a:hover { background: var(--color-surface-2); color: var(--color-text); } .appbar__links a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); } /* Footer */ .foot { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } .foot h4 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-subtle); margin: 0 0 var(--space-4); font-weight: 500; } .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .foot a { font-size: var(--text-sm); color: var(--color-text-muted); } .foot a:hover { color: var(--color-primary); } /* Page shell + landing patterns (shared templates) */ .shell { max-width: 1200px; margin: 0 auto; padding: var(--space-6); } .hero { padding: var(--space-16) 0 var(--space-12); } .hero .kick { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--color-text-subtle); } .hero h1 { font-size: clamp(2.5rem, 6vw, var(--text-5xl)); font-weight: 600; letter-spacing: -.035em; line-height: .98; margin: var(--space-4) 0; } .hero h1 .serif { color: var(--color-primary); } .hero .sub { max-width: 62ch; font-size: var(--text-lg); color: var(--color-text-muted); margin: 0 0 var(--space-8); } .sec-head { margin: var(--space-16) 0 var(--space-6); } .sec-head .kick { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--color-text-subtle); } .sec-head h2 { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -.02em; margin: var(--space-2) 0; } .sec-head h2 .serif { color: var(--color-primary); } .sec-head p { color: var(--color-text-muted); max-width: 70ch; margin: 0; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .liability { font-size: var(--text-xs); color: var(--color-text-subtle); text-align: center; margin: var(--space-6) 0; line-height: 1.6; } @media (max-width: 820px) { .grid3 { grid-template-columns: 1fr; } .grid2 { grid-template-columns: 1fr; } .appbar__links { display: none; } } @media (prefers-reduced-motion: reduce) { .btn, .pcard { transition: none; } .pcard:hover { transform: none; } }