/* ============================================================================ AI MASTER GROWER — DESIGN TOKENS Autonomous Agricultural Intelligence ---------------------------------------------------------------------------- Lineage: evolved from the cinematic dark / instrument-panel reference system in _reference/DESIGN.md. Retains the void-black canvas, full-bleed layout and tracked-out technical typography; departs from it by introducing a chromatic signal system derived from the AI Master Grower mark (bio-green leaf + circuit-cyan substrate). Color here is never decorative — every accent carries a fixed semantic meaning defined below. ========================================================================== */ :root { /* ---------------------------------------------------------------- CANVAS */ --void: #04070a; /* page canvas — cool near-black */ --surface-1: #080d12; /* raised panel */ --surface-2: #0c141b; /* card / console */ --surface-3: #111c25; /* input, inset well */ --surface-4: #17252f; /* hover / active surface */ --scrim: rgba(2, 5, 8, .82); /* ------------------------------------------------------------ FOREGROUND */ --text: #e6f1f5; /* primary — 16.9:1 on --void */ --text-strong: #ffffff; --text-muted: #93a9b4; /* 7.4:1 on --void — safe for body copy */ --text-dim: #5e7480; /* 3.4:1 — LARGE TEXT / NON-TEXT ONLY */ /* ------------------------------------------------- SIGNAL SYSTEM (BRAND) */ /* Green = life, biology, the plant, the primary action. */ --bio: #3ef08a; --bio-bright: #7dff9f; --bio-lime: #9cff5c; /* leaf-edge highlight from the mark */ --bio-deep: #0f7d47; --bio-wash: rgba(62, 240, 138, .10); --bio-line: rgba(62, 240, 138, .28); /* Cyan = machine, telemetry, the circuit substrate, data in motion. */ --cyan: #22d3f0; --cyan-bright: #7fe9ff; --cyan-deep: #0b6f88; --cyan-wash: rgba(34, 211, 240, .10); --cyan-line: rgba(34, 211, 240, .28); /* Blue = depth, infrastructure, the layer beneath. */ --data-blue: #2f7cf6; --data-blue-wash: rgba(47, 124, 246, .12); /* --------------------------------------------------------- STATUS COLORS */ --warn: #ffb020; /* emerging anomaly / advisory */ --warn-wash: rgba(255, 176, 32, .12); --risk: #ff5470; /* crop risk / critical */ --risk-wash: rgba(255, 84, 112, .12); --violet: #a67cff; /* prediction / modelled-not-measured */ --violet-wash: rgba(166, 124, 255, .12); /* ------------------------------------------------------ BORDERS & HAIRLINES */ --line: rgba(230, 241, 245, .10); --line-strong: rgba(230, 241, 245, .20); --line-bio: rgba(62, 240, 138, .35); --line-cyan: rgba(34, 211, 240, .35); /* ------------------------------------------------------------------ GLOW */ --glow-bio: 0 0 0 1px rgba(62,240,138,.28), 0 0 24px -4px rgba(62,240,138,.45); --glow-cyan: 0 0 0 1px rgba(34,211,240,.28), 0 0 24px -4px rgba(34,211,240,.45); --glow-soft: 0 0 40px -12px rgba(62,240,138,.35); --text-glow-bio: 0 0 18px rgba(62,240,138,.55); --text-glow-cyan: 0 0 18px rgba(34,211,240,.55); /* ------------------------------------------------------------- ELEVATION */ --elev-1: 0 1px 2px rgba(0,0,0,.5); --elev-2: 0 8px 24px -12px rgba(0,0,0,.8), 0 1px 0 rgba(230,241,245,.05) inset; --elev-3: 0 24px 64px -24px rgba(0,0,0,.9), 0 1px 0 rgba(230,241,245,.06) inset; /* ------------------------------------------------------------ TYPOGRAPHY */ --font-display: 'Space Grotesk', 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-ui: 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', Menlo, Consolas, monospace; /* Fluid display scale — clamp(min, preferred, max) */ --text-hero: clamp(2.75rem, 1.4rem + 5.6vw, 6.5rem); --text-d1: clamp(2.25rem, 1.3rem + 3.9vw, 4.5rem); --text-d2: clamp(1.85rem, 1.25rem + 2.5vw, 3.25rem); --text-d3: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); --text-h4: clamp(1.15rem, 1.02rem + .55vw, 1.5rem); --text-lead: clamp(1.0625rem, 1rem + .42vw, 1.3125rem); --text-body: 1rem; /* 16px floor — never smaller for prose */ --text-sm: .875rem; --text-label: .75rem; /* tracked-out instrument label */ --text-micro: .6875rem; --track-label: .18em; /* the instrument-panel signature */ --track-nav: .12em; --track-display: -.02em; --lh-tight: 1.04; --lh-snug: 1.22; --lh-body: 1.62; --lh-loose: 1.75; /* --------------------------------------------------------------- SPACING */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 7rem; --s-12: 9rem; --section-y: clamp(4.5rem, 3rem + 7vw, 9rem); --gutter: clamp(1.25rem, .6rem + 2.6vw, 3rem); --measure: 68ch; --container: 84rem; /* 1344px */ --container-narrow: 60rem; /* ----------------------------------------------------------------- SHAPE */ --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* ------------------------------------------------------------- Z-INDEX */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 60; --z-overlay: 80; --z-modal: 100; --z-toast: 120; /* ------------------------------------------------------------- MOTION */ --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 380ms; --dur-scene: 620ms; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.7, 0, .84, 0); --ease-inout: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* --------------------------------------------------------------- LAYERS */ --grid-line: rgba(230, 241, 245, .045); --nav-h: 68px; } /* Motion is meaning here, not decoration — but it is always optional. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-scene: 1ms; } }