/* ================================================================= * gl-tokens.css — GrowLove Design System tokens (Direction A · Daylight) * ----------------------------------------------------------------- * SINGLE SOURCE OF TRUTH: design/tokens.json * Spec: design/DESIGN.md * * If you edit a token here, you MUST mirror the change in * design/tokens.json. The JSON is the contract for any * future codegen (iOS DS v1, Figma sync, etc.). * * v3.0.0 (Deep Teal + Warmth). Do not introduce ad-hoc colors; * if you need a slot that doesn't exist, add it to tokens.json * + DESIGN.md first, then export here. * ================================================================= */ :root { /* ----- Color · Surface ----- */ --gl-color-surface-canvas: #eaf4f2; /* cool cream — page background */ --gl-color-surface-card: #ffffff; /* cards, elevated surfaces */ --gl-color-surface-raised: #ffffff; /* alias for card */ --gl-color-surface-sunken: #d2e5e1; /* recessed cell / metadata pill */ /* ----- Color · Ink (text) ----- */ --gl-color-ink-primary: #0e2421; /* near-black with deep-teal undertone */ --gl-color-ink-secondary: #36544f; /* supporting prose */ --gl-color-ink-muted: #7a938d; /* metadata, labels, hints */ --gl-color-ink-inverse: #ffffff; /* text ON teal CTA */ /* ----- Color · Accent (Deep Teal — primary brand) ----- */ --gl-color-accent-primary: #2e8c8b; /* CTA fill */ --gl-color-accent-primary-text: #1c6968; /* teal as text on canvas */ --gl-color-accent-primary-hover: #1c6968; /* CTA hover */ --gl-color-accent-primary-pressed: #125251; /* CTA active */ --gl-color-accent-primary-soft: #cfe6e5; /* low-emphasis bg */ --gl-color-accent-primary-glow: rgba(46, 140, 139, 0.24); /* CTA shadow */ /* ----- Color · Warm spark + legacy calm aliases ----- * BRAND RULE (v3): warm-decorative is the single warm note in the cool field. * Use ONLY in `.voice-quote--them*` and `.voices-stage-stamp*` selectors * (THEM voice + voices-stage stamp). Never for CTAs, pills, icons, links, * dividers, or body text — those want the deep-teal accent or ink tokens. * Calm aliases below remain for legacy `invite/` and `demo/` pages only; * do not introduce new call-sites — pick the explicit accent/ink token. */ --gl-color-warm-decorative: #d08b5c; /* decorative only, never CTA/text body */ --gl-color-calm-text: #3f8068; /* legacy alias used in invite */ --gl-color-calm-decorative: var(--gl-color-warm-decorative); --gl-color-calm-soft: var(--gl-color-accent-primary-soft); --gl-color-calm-strong: rgba(14, 36, 33, 0.22); /* ----- Color · Line ----- */ --gl-color-line-hairline: rgba(14, 36, 33, 0.10); /* card border, divider */ --gl-color-line-divider: rgba(14, 36, 33, 0.14); /* stronger separators */ --gl-color-line-focus: #2e8c8b; /* 2px focus outline */ /* ----- Color · Feedback (validate once shipped) ----- */ --gl-color-feedback-success: #3f8068; --gl-color-feedback-warning: #c58a4e; --gl-color-feedback-error: #a24a38; --gl-color-feedback-error-inverse: #f5c0b8; /* error tint legible on dark teal-ink CTA surface */ --gl-color-feedback-info: #36544f; /* ----- Color · Overlay ----- */ --gl-color-overlay-scrim: rgba(14, 36, 33, 0.42); --gl-color-overlay-sheet: rgba(255, 255, 255, 0.92); /* ----- Typography · Families ----- */ --gl-font-family-display: 'Fraunces', ui-serif, Georgia, serif; --gl-font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif; --gl-font-family-ui: 'DM Sans', system-ui, -apple-system, sans-serif; --gl-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ----- Typography · Scale ----- */ --gl-font-display-xl: 400 46px/1.05 var(--gl-font-family-display); --gl-font-display-lg: 400 38px/1.05 var(--gl-font-family-display); --gl-font-display-md: 400 30px/1.1 var(--gl-font-family-display); --gl-font-heading-lg: 700 17px/1.25 var(--gl-font-family-body); --gl-font-heading-md: 600 16px/1.3 var(--gl-font-family-body); --gl-font-heading-sm: 600 14px/1.35 var(--gl-font-family-body); --gl-font-body-lg: 400 16px/1.55 var(--gl-font-family-body); --gl-font-body-md: 400 15px/1.5 var(--gl-font-family-body); --gl-font-body-sm: 400 14px/1.5 var(--gl-font-family-body); --gl-font-label-md: 600 11px/1.3 var(--gl-font-family-ui); --gl-font-label-sm: 600 10px/1.3 var(--gl-font-family-ui); --gl-font-mono-sm: 400 13px/1.4 var(--gl-font-family-mono); /* Italic is reserved for ornament/quotes (canvas only, ink color). */ --gl-font-quote-md: italic 400 16px/1.55 var(--gl-font-family-display); /* ----- Letter-spacing helpers ----- */ --gl-tracking-tight: -0.025em; /* large display */ --gl-tracking-normal: -0.005em; /* body */ --gl-tracking-wide: 0.14em; /* labels, eyebrows */ --gl-tracking-wider: 0.18em; /* metadata uppercase */ /* ----- Space (4-px base) ----- */ --gl-space-0: 0; --gl-space-1: 4px; --gl-space-2: 8px; --gl-space-3: 12px; --gl-space-4: 16px; --gl-space-5: 24px; --gl-space-6: 32px; --gl-space-7: 48px; --gl-space-8: 64px; --gl-space-9: 96px; /* ----- Radii (soft-edged paper, not material) ----- */ --gl-radius-sm: 10px; --gl-radius-md: 14px; /* fields, chips, ghost buttons */ --gl-radius-lg: 18px; /* action cards */ --gl-radius-xl: 22px; /* signature letter card */ --gl-radius-pill: 9999px; /* ----- Shadows ----- */ --gl-shadow-sm: 0 1px 0 rgba(14, 36, 33, 0.04); --gl-shadow-md: 0 1px 0 rgba(14, 36, 33, 0.04), 0 8px 24px rgba(14, 36, 33, 0.05); /* ----- Motion ----- */ --gl-ease: cubic-bezier(0.4, 0, 0.2, 1); --gl-duration-fast: 120ms; --gl-duration-base: 280ms; } @media (prefers-reduced-motion: reduce) { :root { --gl-duration-fast: 0ms; --gl-duration-base: 0ms; } } /* ----- Token-level a11y baseline ----- * Focus-visible: always 2px deep-teal outline + 2px gap on canvas/card. * Touch target: enforced at component level (min 44pt). */ :focus-visible { outline: 2px solid var(--gl-color-line-focus); outline-offset: 2px; border-radius: inherit; }