/* ============================================================================= AITERRA BRAND TOKENS — single source of truth Two-tier "earth + signal" system. Tier 1 Fixed brand signal → the constant identity color. Used on EVERY outward/anonymous surface: card, public site, logo, SWAG, login, social. This is the brand equity. It never changes. Tier 2 Season Signal → an in-app-only accent that shifts with the crop-cycle phase. Layered ON TOP of the fixed signal, in bounded places only (never primary buttons/links). See BRAND_GUIDE.md. The same file feeds the landing page now and the web app later, so the public site → app handoff is provably one brand. Do not hardcode hex in components — reference these variables. ========================================================================== */ :root { /* ---- Earth neutrals — the grounded base (the 10,000-year-old craft) ------ */ --earth-paper: #FAF7F1; /* warm off-white — primary LIGHT background */ --earth-paper-2: #F2ECE1; /* slightly deeper panel / card on light */ --earth-line: #E4DBCC; /* hairlines, borders on light */ --earth-mute: #877E6E; /* secondary / muted text on light */ --earth-ink: #1B1712; /* deep soil ink — primary text / DARK background */ --earth-ink-2: #2A241D; /* raised surface on dark */ --earth-line-dk: #3A332A; /* hairlines on dark */ --earth-mute-dk: #A89C89; /* secondary / muted text on dark */ /* ---- Mark (Horizon) fills — single source for the logo's soil/furrow ---- Deep, rich espresso soil (not milk-chocolate). Tweak --mark-soil here only. */ --mark-soil: #2B2117; --mark-furrow: #C3B7A2; /* ---- Tier 1: Fixed brand signal candidates ----------------------------- THREE options to render side-by-side. After comp review, ONE wins and becomes --signal permanently. Swap the --signal line to preview each. */ --signal-blue: #2B5CE6; /* "Precision" — satellite/data confidence */ --signal-blue-ink: #1E44AD; /* AA-safe blue for text/links on light */ --signal-chartreuse: #8AD000; /* "Signal" — living + intelligent spark */ --signal-chartreuse-ink: #4F7A00;/* AA-safe chartreuse for text on light */ --signal-amber: #E2972B; /* "Harvest" — warm outcome/value */ --signal-amber-ink: #A66608; /* AA-safe amber for text on light */ /* The live brand signal. Default = Signal chartreuse (blue dropped per review). Chartreuse/amber need DARK text on their fills; blue would need white. */ --signal: var(--signal-chartreuse); --signal-ink: var(--signal-chartreuse-ink); /* AA-safe variant for text on light */ --on-signal: var(--earth-ink); /* text/icon ON a signal fill (dark for chartreuse/amber) */ /* ---- Tier 2: Season Signal — in-app only, documented here, NOT the brand color. Phenology ramp (BBCH / corn V–R analog). Own slot; never overrides --signal; must not collide with semantic colors below. Wired to crop phase in the app later (Tier 3). --season-signal defaults to the "home" state. */ --season-dormant: #7A5C3E; /* bare soil / dormant */ --season-emergence: #7FB800; /* emergence — fresh young green */ --season-vegetative: #4F9D2E; /* vegetative growth */ --season-reproductive: #C7A92B; /* flowering / reproductive */ --season-maturity: #E0892E; /* grain fill / maturity */ --season-harvest: #B6531C; /* harvest / senescence */ --season-signal: var(--season-vegetative); /* default "home" state */ /* ---- Semantic colors (status + zones) — reserved meanings the Season Signal must never impersonate. Carried over from the web app palette. */ --status-success: #2E9E4F; --status-warning: #E0A12E; --status-error: #D24338; --status-info: #3D7DD6; /* ---- Typography ---------------------------------------------------------- */ --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; /* wordmark + headlines */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* body + UI (shared with app) */ --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* type scale (1.25 major-third-ish, tuned) */ --t-display: clamp(2.6rem, 5.2vw, 4.25rem); --t-h1: clamp(2rem, 3.4vw, 2.85rem); --t-h2: 1.6rem; --t-h3: 1.2rem; --t-body: 1.0625rem; --t-small: 0.9rem; --t-eyebrow: 0.78rem; /* uppercase label */ --lh-tight: 1.06; --lh-snug: 1.25; --lh-body: 1.55; /* ---- Space + radius + shadow -------------------------------------------- */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: 6rem; --radius: 14px; /* the brand "field tile" corner */ --radius-sm: 8px; --radius-pill: 999px; --shadow-soft: 0 1px 2px rgba(27,23,18,.06), 0 8px 24px rgba(27,23,18,.06); --maxw: 1080px; } /* ============================================================================= SEMANTIC SURFACE TOKENS — light & dark modes. Components reference these (--bg, --surface, --text, --border, --panel-*), never the raw earth tokens, so the SAME markup themes both ways. Set the mode by putting data-theme="light|dark" on (default = light). The same mapping feeds the web app's themes later. ========================================================================== */ :root, [data-theme="light"] { color-scheme: light; --bg: var(--earth-paper); --surface: var(--earth-paper); --surface-2: var(--earth-paper-2); --text: var(--earth-ink); --text-muted:#50483A; /* upgraded from #877E6E → ≈7:1 on paper; lifts ALL muted text (labels, captions, placeholders, sources) */ --border: var(--earth-line); --shadow: var(--shadow-soft); --signal-text: var(--signal-ink); /* accent TEXT on light = darkened signal (AA on paper) */ /* Field Hand chat = an intentionally dark, premium panel even in light mode */ --panel: var(--earth-ink); --panel-2: var(--earth-ink-2); --panel-text: var(--earth-paper); --panel-muted: var(--earth-mute-dk); --panel-border:var(--earth-line-dk); } [data-theme="dark"] { color-scheme: dark; --bg: #141009; /* deep soil, a touch below ink for depth */ --surface: var(--earth-ink); --surface-2: #1B130B; /* sidebar/cards/bubbles — deep espresso, not milk-chocolate */ --text: var(--earth-paper); --text-muted:var(--earth-mute-dk); --border: var(--earth-line-dk); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45); /* chat panel raises ABOVE the dark page so it still reads as a surface */ --panel: var(--earth-ink-2); --panel-2: #332c23; --panel-text: var(--earth-paper); --panel-muted: var(--earth-mute-dk); --panel-border:#403930; }