/* Connection-Centric theme. * * shadcn/ui, style "Mira" (compact, made for dense interfaces), theme "green" * on "olive" neutrals, default radius. Designed on shadcn/create — preset * b2pS0kbEu, https://ui.shadcn.com/create?preset=b2pS0kbEu — and the values * below are the official registry's answer for that preset * (ui.shadcn.com/init?style=mira&theme=green&baseColor=olive…, type * registry:base "base-mira"). Token names are shadcn's, so the two can be * compared line by line. Shared by the app and the server-rendered pages. * * Two deliberate departures, each marked "departure": * - light --muted-foreground is a step darker: the preset's 4.26:1 on white * fails AA, and these phones are read in sunlight; * - --primary-text exists because the dark primary (a fill) is 2.8:1 as text; * dark mode uses the preset's own lighter green (its sidebar-primary). * * Dark mode is the .dark class on , set from the person's choice or the * system (see the inline script in index.html and pages.mjs). */ :root { color-scheme: light; --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.153 0.006 107.1); --card: oklch(1 0 0); --card-foreground: oklch(0.153 0.006 107.1); --popover: oklch(1 0 0); --popover-foreground: oklch(0.153 0.006 107.1); --primary: oklch(0.527 0.154 150.069); --primary-foreground: oklch(0.982 0.018 155.826); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.966 0.005 106.5); --muted-foreground: oklch(0.54 0.031 107.3); /* departure: preset says 0.58 */ --accent: oklch(0.966 0.005 106.5); --accent-foreground: oklch(0.228 0.013 107.4); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.93 0.007 106.5); --input: oklch(0.93 0.007 106.5); --ring: oklch(0.737 0.021 106.9); --chart-1: oklch(0.871 0.15 154.449); --chart-2: oklch(0.723 0.219 149.579); --chart-3: oklch(0.627 0.194 149.214); --chart-4: oklch(0.527 0.154 150.069); --chart-5: oklch(0.448 0.119 151.328); --sidebar: oklch(0.988 0.003 106.5); --sidebar-foreground: oklch(0.153 0.006 107.1); --sidebar-primary: oklch(0.627 0.194 149.214); --sidebar-primary-foreground: oklch(0.982 0.018 155.826); --sidebar-accent: oklch(0.966 0.005 106.5); --sidebar-accent-foreground: oklch(0.228 0.013 107.4); --sidebar-border: oklch(0.93 0.007 106.5); --sidebar-ring: oklch(0.737 0.021 106.9); /* The record has three states a badge must show; shadcn names two of them. */ --warning: oklch(0.555 0.163 48.998); /* amber-700, from the preset's palette */ --primary-text: var(--primary); /* shadcn's radius scale */ --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); /* Tailwind's shadows, which is what Mira's shadow-sm/md/lg resolve to */ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* The alphas Mira's recipes use (ring/30, foreground/10, input/20 …) */ --ring-30: color-mix(in oklab, var(--ring) 30%, transparent); --foreground-10: color-mix(in oklab, var(--foreground) 10%, transparent); --input-20: color-mix(in oklab, var(--input) 20%, transparent); --input-30: color-mix(in oklab, var(--input) 30%, transparent); --input-50: color-mix(in oklab, var(--input) 50%, transparent); --primary-5: color-mix(in oklab, var(--primary) 5%, transparent); --primary-10: color-mix(in oklab, var(--primary) 10%, transparent); --primary-80: color-mix(in oklab, var(--primary) 80%, transparent); --destructive-10: color-mix(in oklab, var(--destructive) 10%, transparent); --destructive-20: color-mix(in oklab, var(--destructive) 20%, transparent); --warning-10: color-mix(in oklab, var(--warning) 10%, transparent); --muted-50: color-mix(in oklab, var(--muted) 50%, transparent); --background-95: color-mix(in oklab, var(--background) 95%, transparent); --overlay: color-mix(in oklab, var(--foreground) 50%, transparent); /* Inter is the preset's font; Geist is the Centric type sheet's fallback face and on Google Fonts. Gujarati and Hindi fall through to the phone's Noto. */ --font-sans: Geist, Inter, "Noto Sans", system-ui, Roboto, "Segoe UI", "Noto Sans Gujarati", "Noto Sans Devanagari", sans-serif; --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; } :root.dark { color-scheme: dark; --background: oklch(0.153 0.006 107.1); --foreground: oklch(0.988 0.003 106.5); --card: oklch(0.228 0.013 107.4); --card-foreground: oklch(0.988 0.003 106.5); --popover: oklch(0.228 0.013 107.4); --popover-foreground: oklch(0.988 0.003 106.5); --primary: oklch(0.448 0.119 151.328); --primary-foreground: oklch(0.982 0.018 155.826); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.286 0.016 107.4); --muted-foreground: oklch(0.737 0.021 106.9); --accent: oklch(0.286 0.016 107.4); --accent-foreground: oklch(0.988 0.003 106.5); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.58 0.031 107.3); --chart-1: oklch(0.871 0.15 154.449); --chart-2: oklch(0.723 0.219 149.579); --chart-3: oklch(0.627 0.194 149.214); --chart-4: oklch(0.527 0.154 150.069); --chart-5: oklch(0.448 0.119 151.328); --sidebar: oklch(0.228 0.013 107.4); --sidebar-foreground: oklch(0.988 0.003 106.5); --sidebar-primary: oklch(0.723 0.219 149.579); --sidebar-primary-foreground: oklch(0.982 0.018 155.826); --sidebar-accent: oklch(0.286 0.016 107.4); --sidebar-accent-foreground: oklch(0.988 0.003 106.5); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.58 0.031 107.3); --warning: oklch(0.769 0.188 70.08); /* amber-500 */ --primary-text: var(--sidebar-primary); /* departure: readable green for text */ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5); --overlay: color-mix(in oklab, black 60%, transparent); } /* base, as shadcn's @layer base: borders take --border, focus takes the ring */ html { background: var(--background); } body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } *, *::before, *::after { box-sizing: border-box; border-color: var(--border); } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } ::selection { background: var(--primary); color: var(--primary-foreground); }