/* ============================================================ Green Shoot Brands — Design Tokens Source of truth for digital implementation. Derived from the GSB Brand Book (canonical reference). ============================================================ */ :root { /* ---------- COLOR — Day Mode (default) ---------- */ /* Used for documents, marketing site, light surfaces */ --gsb-day-bg: #fafafa; /* primary page background — never pure white */ --gsb-day-bg-alt: #f0f0ee; /* secondary surfaces, cards, dividers */ --gsb-day-ink: #0a0c0a; /* primary text */ --gsb-day-muted: #6b6e6a; /* secondary text, captions */ --gsb-day-rule: rgba(10, 12, 10, 0.12); /* hairline rules */ /* ---------- COLOR — Night Mode ---------- */ /* Used for product UI, app shell, stage/event, internal tools */ --gsb-night-bg: #0a0c0a; --gsb-night-bg-alt: #151815; --gsb-night-ink: #f0f0ee; --gsb-night-muted: #8a8c86; --gsb-night-rule: rgba(240, 240, 238, 0.14); /* ---------- ACCENT — "The Shoot" ---------- */ /* Single accent. Used sparingly. The signal. */ --gsb-neon: #00e676; /* neon-tube green — for night mode, screens, energy */ --gsb-neon-dim: #0a5c2e; /* deep professional green — for day mode, print, labels */ /* ---------- SEMANTIC ALIASES (default = Day) ---------- */ --gsb-bg: var(--gsb-day-bg); --gsb-bg-alt: var(--gsb-day-bg-alt); --gsb-ink: var(--gsb-day-ink); --gsb-muted: var(--gsb-day-muted); --gsb-rule: var(--gsb-day-rule); --gsb-accent: var(--gsb-neon-dim); /* day default — deep green */ /* ---------- TYPOGRAPHY — FONT FAMILIES ---------- */ /* Display + body: Space Grotesk (with Inter fallback) */ --gsb-font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* UI text: Inter */ --gsb-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* Labels, eyebrows, technical metadata: JetBrains Mono */ --gsb-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Editorial accent / italic emphasis: Fraunces */ --gsb-font-serif: "Fraunces", "Instrument Serif", Georgia, serif; /* ---------- TYPOGRAPHY — WEB TYPE SCALE (rem-based) ---------- */ /* Brand book scale is 1920px slide-native; web scale below is derived. */ --gsb-fs-display: clamp(3.5rem, 6vw + 1rem, 7rem); /* 56–112px */ --gsb-fs-h1: clamp(2.5rem, 3.5vw + 1rem, 4.5rem); /* 40–72px */ --gsb-fs-h2: clamp(1.75rem, 2vw + 0.75rem, 2.75rem); /* 28–44px */ --gsb-fs-h3: 1.5rem; /* 24px */ --gsb-fs-body-lg: 1.25rem; /* 20px */ --gsb-fs-body: 1rem; /* 16px */ --gsb-fs-small: 0.875rem; /* 14px */ --gsb-fs-caption: 0.75rem; /* 12px */ /* ---------- TYPOGRAPHY — TRACKING & WEIGHT ---------- */ --gsb-tracking-tight: -0.045em; /* huge display headlines */ --gsb-tracking-display: -0.03em; /* titles */ --gsb-tracking-normal: -0.01em; /* body */ --gsb-tracking-mono: 0.18em; /* mono labels, eyebrows — UPPERCASE */ --gsb-weight-light: 300; --gsb-weight-regular: 400; --gsb-weight-medium: 500; --gsb-weight-bold: 700; /* ---------- SPACING SCALE (8px base) ---------- */ --gsb-space-1: 0.25rem; /* 4px */ --gsb-space-2: 0.5rem; /* 8px */ --gsb-space-3: 0.75rem; /* 12px */ --gsb-space-4: 1rem; /* 16px */ --gsb-space-5: 1.5rem; /* 24px */ --gsb-space-6: 2rem; /* 32px */ --gsb-space-7: 3rem; /* 48px */ --gsb-space-8: 4rem; /* 64px */ --gsb-space-9: 6rem; /* 96px */ --gsb-space-10: 8rem; /* 128px */ /* ---------- LAYOUT ---------- */ --gsb-max-width: 1280px; --gsb-content-width: 72ch; --gsb-gutter: clamp(1rem, 4vw, 4rem); /* ---------- RADIUS ---------- */ /* GSB is a low-radius brand. Sharp by default. */ --gsb-radius-none: 0; --gsb-radius-sm: 2px; --gsb-radius-md: 4px; --gsb-radius-pill: 999px; /* ---------- MOTION ---------- */ --gsb-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --gsb-duration-fast: 150ms; --gsb-duration: 240ms; --gsb-duration-slow: 480ms; /* ---------- LINE-ART STROKE WEIGHTS ---------- */ /* The hand-drawn SVG families (shoot, growth stages, contact icons, HQ silhouette) share one pen. Paired with vector-effect: non-scaling-stroke so rendered weight is viewBox-independent. */ --gsb-stroke-hero: 2px; /* the hero shoot — the largest statement, slightly heavier */ --gsb-stroke-icon: 1.5px; /* primary line for all other hand-drawn icons */ --gsb-stroke-vein: 1px; /* secondary detail lines (leaf veins, inner marks) */ } /* ---------- NIGHT MODE OVERRIDE ---------- */ /* Apply [data-theme="night"] on a scope (html, body, or section) */ [data-theme="night"] { --gsb-bg: var(--gsb-night-bg); --gsb-bg-alt: var(--gsb-night-bg-alt); --gsb-ink: var(--gsb-night-ink); --gsb-muted: var(--gsb-night-muted); --gsb-rule: var(--gsb-night-rule); --gsb-accent: var(--gsb-neon); /* night accent = bright neon */ } /* ---------- BASE TYPOGRAPHY UTILITIES ---------- */ .gsb-display { font-family: var(--gsb-font-display); font-size: var(--gsb-fs-display); font-weight: var(--gsb-weight-regular); letter-spacing: var(--gsb-tracking-tight); line-height: 0.92; } .gsb-title { font-family: var(--gsb-font-display); font-size: var(--gsb-fs-h1); font-weight: var(--gsb-weight-medium); letter-spacing: var(--gsb-tracking-display); line-height: 1.02; text-wrap: pretty; } .gsb-body { font-family: var(--gsb-font-sans); font-size: var(--gsb-fs-body); font-weight: var(--gsb-weight-regular); letter-spacing: var(--gsb-tracking-normal); line-height: 1.55; } .gsb-eyebrow { font-family: var(--gsb-font-mono); font-size: var(--gsb-fs-caption); letter-spacing: var(--gsb-tracking-mono); text-transform: uppercase; color: var(--gsb-muted); } .gsb-italic { font-family: var(--gsb-font-serif); font-style: italic; } /* ---------- WORDMARK ---------- */ /* The wordmark is typographic, not graphic. Always paired with the neon-green period — "the shoot signal." */ .gsb-wordmark { font-family: var(--gsb-font-sans); font-weight: var(--gsb-weight-bold); letter-spacing: -0.03em; white-space: nowrap; color: var(--gsb-ink); } .gsb-wordmark::after { content: "."; color: var(--gsb-accent); margin-left: 0.05em; }