Spaces:
Running
Running
| :root { | |
| color-scheme: light dark; | |
| /* ---- Warm cream theme (light) — harmonized with the Chumash tribal palette ---- | |
| Colors are drawn from / harmonize with the Santa Ynez Band of Chumash logo: | |
| cobalt sunburst blue, olive ring green, terracotta center red, golden accents, | |
| black turtle, cream ground. Cobalt blue doubles as the cyber/tech accent. */ | |
| /* Surfaces: page = warm sand/cream gradient, chrome = cream, cards = white */ | |
| --lc-bg: #faf7f1; /* --bg-primary */ | |
| --lc-bg2: #f3eee6; /* --bg-secondary */ | |
| --lc-bg3: #ebe4d8; /* --bg-tertiary */ | |
| --lc-gradient: linear-gradient(165deg, #fbf8f3 0%, #f5efe6 55%, #f0e9df 100%); | |
| --lc-header: #fbf9f5; /* very light cream chrome — NOT pure white */ | |
| --lc-sidebar: #e8e0d4; /* deeper cream so cards separate */ | |
| --lc-elevated: #ffffff; /* --card-bg */ | |
| --lc-card: #ffffff; | |
| --lc-card-hover: #f5f1e9; | |
| --lc-input: #ffffff; | |
| --lc-bubble: #ffffff; /* assistant bubble = white card */ | |
| --lc-border: #ddd5c8; /* --border-primary */ | |
| --lc-border-muted: #e8e1d6; | |
| --lc-text: #1a1613; /* --text-primary (warm near-black, echoes the turtle) */ | |
| --lc-text-secondary: #4a453e; | |
| --lc-muted: #6a645c; /* --text-tertiary / --text-muted */ | |
| --lc-placeholder: #9c958a; | |
| /* Accent — cobalt sunburst blue (tribal + cybersecurity); the single primary action */ | |
| --lc-accent: #1e6fbd; | |
| --lc-accent2: #2a86c4; | |
| --lc-accent-strong: #164e8e; | |
| --lc-accent-gradient: linear-gradient(135deg, #2277c6, #14568f); | |
| --lc-accent-light: #e6f0fa; | |
| --lc-hover: rgba(30, 111, 189, 0.08); | |
| --lc-selected: rgba(30, 111, 189, 0.12); | |
| /* Tribal earth tones — used as small meaning accents, not decoration */ | |
| --lc-tribal-blue: #1e6fbd; | |
| --lc-tribal-green: #4f7d2b; | |
| --lc-tribal-red: #a93b22; | |
| --lc-tribal-gold: #e0a008; | |
| --lc-tribal-strip: linear-gradient(90deg, #1e6fbd 0%, #4f7d2b 34%, #a93b22 67%, #e0a008 100%); | |
| /* Feedback colors mapped to the tribal palette */ | |
| --lc-danger: #b4402a; /* terracotta */ | |
| --lc-danger-strong: #8a2e1b; | |
| --lc-danger-text: #6e2415; | |
| --lc-danger-bg: #f8ece7; | |
| --lc-danger-border: #e4b6a8; | |
| --lc-success: #4f7d2b; /* olive/forest green */ | |
| --lc-success-bg: #e9f0df; | |
| --lc-success-border: #afc98c; | |
| --lc-warning: #b8830a; /* golden ochre */ | |
| --lc-warning-fill: #e0a008; | |
| /* Subtle surface tints (code blocks / table headers) — warm, not neutral black */ | |
| --lc-tint: rgba(40, 30, 10, 0.04); | |
| --lc-tint-strong: rgba(40, 30, 10, 0.06); | |
| /* Warm-tinted shadows */ | |
| --lc-shadow-sm: 0 1px 2px rgba(40, 30, 10, 0.06); | |
| --lc-shadow: 0 4px 10px -2px rgba(40, 30, 10, 0.08), 0 2px 4px -2px rgba(40, 30, 10, 0.05); | |
| --lc-shadow-lg: 0 12px 24px -6px rgba(40, 30, 10, 0.12), 0 4px 8px -4px rgba(40, 30, 10, 0.06); | |
| /* Upward shadow for the sticky composer dock */ | |
| --lc-shadow-up: 0 -6px 16px -10px rgba(40, 30, 10, 0.18); | |
| /* Focus ring — visible on all interactive elements */ | |
| --lc-focus-ring: 0 0 0 2px var(--lc-card), 0 0 0 4px var(--lc-accent); | |
| /* Radius scale */ | |
| --lc-radius-sm: 6px; | |
| --lc-radius: 10px; | |
| --lc-radius-lg: 14px; | |
| /* Layout — centered reading column for the conversation */ | |
| --lc-col: 900px; | |
| } | |
| /* ---- Dark mode (parallel set — deep charcoal "cyber" surfaces, tribal-tinted accents) ---- */ | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --lc-bg: #0e1216; | |
| --lc-bg2: #141a1f; | |
| --lc-bg3: #1b232a; | |
| --lc-gradient: linear-gradient(165deg, #121821 0%, #0e1216 55%, #0b0f13 100%); | |
| --lc-header: #121821; | |
| --lc-sidebar: #161d24; | |
| --lc-elevated: #182029; | |
| --lc-card: #182029; | |
| --lc-card-hover: #1f2a34; | |
| --lc-input: #182029; | |
| --lc-bubble: #182029; | |
| --lc-border: #2a3742; | |
| --lc-border-muted: #212c35; | |
| --lc-text: #eef3f7; | |
| --lc-text-secondary: #c2cdd6; | |
| --lc-muted: #93a1ad; | |
| --lc-placeholder: #6b7986; | |
| --lc-accent: #4d9fe0; | |
| --lc-accent2: #5fb0c9; | |
| --lc-accent-strong: #7bb8ea; | |
| --lc-accent-gradient: linear-gradient(135deg, #3f97dd, #2f7fc4); | |
| --lc-accent-light: rgba(77, 159, 224, 0.16); | |
| --lc-hover: rgba(77, 159, 224, 0.12); | |
| --lc-selected: rgba(77, 159, 224, 0.2); | |
| --lc-tribal-blue: #4d9fe0; | |
| --lc-tribal-green: #7fb356; | |
| --lc-tribal-red: #d5674b; | |
| --lc-tribal-gold: #e6b53a; | |
| --lc-tribal-strip: linear-gradient(90deg, #4d9fe0 0%, #7fb356 34%, #d5674b 67%, #e6b53a 100%); | |
| --lc-danger: #e0755b; | |
| --lc-danger-strong: #eda08c; | |
| --lc-danger-text: #f2c3b6; | |
| --lc-danger-bg: rgba(180, 64, 42, 0.16); | |
| --lc-danger-border: rgba(224, 117, 91, 0.4); | |
| --lc-success: #8bbf5f; | |
| --lc-success-bg: rgba(79, 125, 43, 0.18); | |
| --lc-success-border: rgba(139, 191, 95, 0.4); | |
| --lc-warning: #e6b53a; | |
| --lc-warning-fill: #e6b53a; | |
| --lc-tint: rgba(230, 240, 250, 0.05); | |
| --lc-tint-strong: rgba(230, 240, 250, 0.08); | |
| --lc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); | |
| --lc-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4); | |
| --lc-shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4); | |
| --lc-shadow-up: 0 -6px 16px -10px rgba(0, 0, 0, 0.6); | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| body { | |
| font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| font-size: 15px; | |
| line-height: 1.5; | |
| background: var(--lc-bg); | |
| color: var(--lc-text); | |
| } | |
| #root { | |
| height: 100%; | |
| min-height: 100dvh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| button, | |
| input, | |
| textarea { | |
| font-family: inherit; | |
| } | |
| /* Visible focus ring on all interactive elements (low specificity so | |
| component rules can refine it). */ | |
| :where(a, button, input, textarea, select, [tabindex]):focus-visible { | |
| outline: none; | |
| box-shadow: var(--lc-focus-ring); | |
| } | |
| /* Respect reduced-motion: disable spinners / transitions */ | |
| @media (prefers-reduced-motion: reduce) { | |
| *, | |
| *::before, | |
| *::after { | |
| animation-duration: 0.001ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.001ms ; | |
| scroll-behavior: auto ; | |
| } | |
| } | |