/* * canopy-v2.css — Canopy Design System v2 (Field Press) * AUTO-GENERATED FROM the design handoff source via prefix pass on 2026-04-28. * Every original token --x has been renamed to --v2-x so this file is * isolated from legacy --x consumers in style.css. Surfaces consume v2 * by referencing var(--v2-bg-primary) etc., never raw hex. * Cutover to unprefixed names happens at Phase 5 (when style.css is empty). * * Source: docs/design/Canopy Design System Spec.md * Visual reference: docs/design/mockups/Canopy Design System v2.html */ /* * canopy-tokens.css — Canopy Design System v2 * Field Press visual direction * Generated: 2026-04-28 * * Naming schema: follows existing canopy convention. * --v2-bg-* surfaces * --v2-text-* text colors * --v2-accent-* brand color family (botanical green) * --v2-pop-* semantic pops (one role each, never cross-assign) * --v2-pill-* pill badge pairs (bg + text) * --v2-space-* t-shirt spacing * --v2-radius-* border radii * --v2-ease-* easing curves * --v2-transition-* duration shorthands * --v2-type-* composite font shorthands * New gap tokens follow the same schema rules. * * Consumption: @import before style.css. * Dark mode: .dark on . All semantic tokens flip; primitives don't. */ /* ─── 0. RAW PRIMITIVES ───────────────────────────────────────────────────── */ /* Never reference these in components. Use semantic tokens. */ :root { --v2-raw-ink-950: oklch(18% 0.02 150); --v2-raw-ink-900: oklch(22% 0.02 150); --v2-raw-ink-800: oklch(30% 0.02 150); --v2-raw-ink-700: oklch(40% 0.02 150); --v2-raw-ink-600: oklch(50% 0.02 150); --v2-raw-ink-500: oklch(58% 0.02 150); --v2-raw-ink-400: oklch(66% 0.02 150); --v2-raw-ink-300: oklch(74% 0.02 150); --v2-raw-ink-200: oklch(84% 0.015 90); --v2-raw-ink-100: oklch(91% 0.012 85); --v2-raw-linen-50: oklch(95% 0.008 85); --v2-raw-linen-25: oklch(98% 0.006 85); --v2-raw-linen-0: oklch(99.5% 0.003 85); } /* ─── 1. BACKGROUNDS ──────────────────────────────────────────────────────── */ :root { --v2-bg-primary: var(--v2-raw-linen-25); /* page background */ --v2-bg-secondary: var(--v2-raw-linen-50); /* section / grouped backgrounds */ --v2-bg-card: var(--v2-raw-linen-0); /* card surface */ --v2-bg-card-hover: oklch(96% 0.008 85); /* card hover state */ --v2-bg-panel: var(--v2-raw-linen-0); /* panels, drawers, bottom sheets */ --v2-bg-overlay: oklch(18% 0.02 150 / 0.45); /* modal scrim */ } .dark { --v2-bg-primary: var(--v2-raw-ink-950); --v2-bg-secondary: var(--v2-raw-ink-900); --v2-bg-card: var(--v2-raw-ink-800); --v2-bg-card-hover: oklch(33% 0.02 150); --v2-bg-panel: var(--v2-raw-ink-800); --v2-bg-overlay: oklch(0% 0 0 / 0.65); } /* ─── 2. TEXT ─────────────────────────────────────────────────────────────── */ :root { --v2-text-primary: var(--v2-raw-ink-950); --v2-text-secondary: var(--v2-raw-ink-600); --v2-text-tertiary: var(--v2-raw-ink-400); --v2-text-muted: var(--v2-raw-ink-300); /* disabled / placeholder */ --v2-text-stone: var(--v2-raw-ink-500); /* neutral pill text */ --v2-text-on-dark: var(--v2-raw-linen-0); /* always light, regardless of theme */ } .dark { --v2-text-primary: var(--v2-raw-linen-25); --v2-text-secondary: var(--v2-raw-ink-400); --v2-text-tertiary: var(--v2-raw-ink-500); --v2-text-muted: var(--v2-raw-ink-700); --v2-text-stone: var(--v2-raw-ink-400); --v2-text-on-dark: var(--v2-raw-linen-0); /* unchanged */ } /* ─── 3. ACCENTS — botanical green family ─────────────────────────────────── */ :root { --v2-accent-botanical: oklch(33% 0.09 162); /* Hunter green — primary brand */ --v2-accent-botanical-mid: oklch(52% 0.08 162); --v2-accent-botanical-light: oklch(70% 0.06 162); --v2-accent-botanical-dark: oklch(28% 0.08 162); --v2-accent-terracotta: oklch(52% 0.10 60); /* warm earth */ --v2-accent-terracotta-light:oklch(70% 0.07 60); --v2-accent-terracotta-dark: oklch(38% 0.09 60); --v2-accent-charcoal: var(--v2-raw-ink-950); /* near-black, green-undertoned */ --v2-accent-glass-blue: oklch(50% 0.04 230); /* cool slate */ --v2-accent-limestone: var(--v2-raw-linen-50); /* warm off-white */ } .dark { --v2-accent-botanical: oklch(60% 0.09 162); /* Hunter green dark — legible */ --v2-accent-botanical-mid: oklch(52% 0.08 162); --v2-accent-botanical-light: oklch(70% 0.06 162); --v2-accent-botanical-dark: oklch(38% 0.08 162); --v2-accent-terracotta: oklch(62% 0.10 60); --v2-accent-terracotta-light:oklch(74% 0.07 60); --v2-accent-terracotta-dark: oklch(46% 0.09 60); --v2-accent-charcoal: var(--v2-raw-linen-25); --v2-accent-glass-blue: oklch(62% 0.04 230); --v2-accent-limestone: var(--v2-raw-ink-800); } /* ─── 4. POPS — one semantic role each, never cross-assign ───────────────── */ /* * Each pop has three slots: base, -bg (tinted surface), implicit text = base. * --v2-pop-coral → blocking attention only (overdue, critical, destructive) * --v2-pop-sage → data positive / botanical (healthy, complete, in-ground) * --v2-pop-ochre → warning (caution, upcoming, partial) * --v2-pop-slate → info / metadata (zone, date, context) * --v2-heat-warmth → bottom-heat events ONLY */ :root { --v2-pop-coral: oklch(48% 0.1 25); /* burnt madder */ --v2-pop-coral-bg: oklch(93% 0.025 25); --v2-pop-coral-muted: oklch(56% 0.07 25); --v2-pop-sage: oklch(33% 0.09 162); --v2-pop-sage-bg: oklch(93% 0.025 162); --v2-pop-sage-muted: oklch(52% 0.06 162); --v2-pop-ochre: oklch(52% 0.10 60); /* raw sienna */ --v2-pop-ochre-bg: oklch(93% 0.035 60); --v2-pop-ochre-muted: oklch(60% 0.07 60); --v2-pop-slate: oklch(50% 0.04 230); --v2-pop-slate-bg: oklch(93% 0.02 230); --v2-pop-slate-muted: oklch(60% 0.03 230); --v2-heat-warmth: oklch(54% 0.12 40); /* irregular name kept from v1 */ --v2-heat-warmth-bg: oklch(93% 0.04 40); --v2-heat-warmth-muted: oklch(62% 0.09 40); } .dark { --v2-pop-coral: oklch(60% 0.10 25); --v2-pop-coral-bg: oklch(28% 0.05 25); --v2-pop-coral-muted: oklch(68% 0.07 25); --v2-pop-sage: oklch(60% 0.09 162); --v2-pop-sage-bg: oklch(24% 0.05 162); --v2-pop-sage-muted: oklch(52% 0.06 162); --v2-pop-ochre: oklch(62% 0.10 60); --v2-pop-ochre-bg: oklch(28% 0.06 60); --v2-pop-ochre-muted: oklch(70% 0.07 60); --v2-pop-slate: oklch(62% 0.04 230); --v2-pop-slate-bg: oklch(26% 0.03 230); --v2-pop-slate-muted: oklch(70% 0.03 230); --v2-heat-warmth: oklch(65% 0.12 40); --v2-heat-warmth-bg: oklch(28% 0.07 40); --v2-heat-warmth-muted: oklch(72% 0.09 40); } /* ─── 5. STATUS ───────────────────────────────────────────────────────────── */ :root { --v2-danger-bg: var(--v2-pop-coral-bg); --v2-danger-text: var(--v2-pop-coral); --v2-danger-border: var(--v2-pop-coral); --v2-danger-hover-bg: oklch(90% 0.035 25); --v2-danger-hover-text: oklch(42% 0.10 25); --v2-danger-strong: oklch(38% 0.10 25); --v2-success-bg: var(--v2-pop-sage-bg); --v2-success-text: var(--v2-pop-sage); } .dark { --v2-danger-bg: var(--v2-pop-coral-bg); --v2-danger-text: var(--v2-pop-coral); --v2-danger-border: var(--v2-pop-coral); --v2-danger-hover-bg: oklch(32% 0.07 25); --v2-danger-hover-text: oklch(68% 0.10 25); --v2-danger-strong: oklch(72% 0.10 25); --v2-success-bg: var(--v2-pop-sage-bg); --v2-success-text: var(--v2-pop-sage); } /* ─── 6. BORDERS & SHADOWS ───────────────────────────────────────────────── */ :root { --v2-edge: var(--v2-raw-ink-200); /* default border */ --v2-border-soft: var(--v2-raw-ink-100); /* subtle border */ --v2-border-strong: var(--v2-raw-ink-300); /* emphasis border */ --v2-shadow-warm: 0 1px 3px oklch(18% 0.02 150 / 0.07), 0 1px 2px oklch(18% 0.02 150 / 0.05); --v2-shadow-warm-lg: 0 4px 12px oklch(18% 0.02 150 / 0.09), 0 2px 4px oklch(18% 0.02 150 / 0.06); --v2-elev-1: 0 1px 3px oklch(18% 0.02 150 / 0.07), 0 1px 2px oklch(18% 0.02 150 / 0.05); --v2-elev-2: 0 4px 12px oklch(18% 0.02 150 / 0.09), 0 2px 4px oklch(18% 0.02 150 / 0.06); --v2-elev-3: 0 8px 24px oklch(18% 0.02 150 / 0.13), 0 4px 8px oklch(18% 0.02 150 / 0.07); } .dark { --v2-edge: var(--v2-raw-ink-700); --v2-border-soft: var(--v2-raw-ink-800); --v2-border-strong: var(--v2-raw-ink-600); --v2-shadow-warm: 0 1px 3px oklch(0% 0 0 / 0.3), 0 1px 2px oklch(0% 0 0 / 0.2); --v2-shadow-warm-lg: 0 4px 12px oklch(0% 0 0 / 0.35), 0 2px 4px oklch(0% 0 0 / 0.25); --v2-elev-1: 0 1px 3px oklch(0% 0 0 / 0.3), 0 1px 2px oklch(0% 0 0 / 0.2); --v2-elev-2: 0 4px 12px oklch(0% 0 0 / 0.35), 0 2px 4px oklch(0% 0 0 / 0.25); --v2-elev-3: 0 8px 24px oklch(0% 0 0 / 0.45), 0 4px 8px oklch(0% 0 0 / 0.3); } /* ─── 7. PILLS (8 fixed pairs) ───────────────────────────────────────────── */ :root { --v2-pill-shade-bg: var(--v2-raw-ink-100); --v2-pill-shade-text: var(--v2-raw-ink-700); --v2-pill-sun-bg: var(--v2-pop-ochre-bg); --v2-pill-sun-text: var(--v2-pop-ochre); --v2-pill-heat-bg: var(--v2-heat-warmth-bg); --v2-pill-heat-text: var(--v2-heat-warmth); --v2-pill-cool-bg: var(--v2-pop-slate-bg); --v2-pill-cool-text: var(--v2-pop-slate); --v2-pill-zone-bg: oklch(93% 0.02 85); --v2-pill-zone-text: var(--v2-raw-ink-600); --v2-pill-bee-bg: oklch(93% 0.04 85); --v2-pill-bee-text: oklch(48% 0.08 80); --v2-pill-perennial-bg: var(--v2-pop-sage-bg); --v2-pill-perennial-text: var(--v2-pop-sage); --v2-pill-annual-bg: oklch(93% 0.025 180); --v2-pill-annual-text: oklch(42% 0.06 180); } .dark { --v2-pill-shade-bg: var(--v2-raw-ink-800); --v2-pill-shade-text: var(--v2-raw-ink-400); --v2-pill-sun-bg: var(--v2-pop-ochre-bg); --v2-pill-sun-text: var(--v2-pop-ochre); --v2-pill-heat-bg: var(--v2-heat-warmth-bg); --v2-pill-heat-text: var(--v2-heat-warmth); --v2-pill-cool-bg: var(--v2-pop-slate-bg); --v2-pill-cool-text: var(--v2-pop-slate); --v2-pill-zone-bg: var(--v2-raw-ink-800); --v2-pill-zone-text: var(--v2-raw-ink-400); --v2-pill-bee-bg: oklch(28% 0.04 80); --v2-pill-bee-text: oklch(65% 0.08 80); --v2-pill-perennial-bg: var(--v2-pop-sage-bg); --v2-pill-perennial-text: var(--v2-pop-sage); --v2-pill-annual-bg: oklch(24% 0.025 180); --v2-pill-annual-text: oklch(62% 0.06 180); } /* ─── 8. TABS ─────────────────────────────────────────────────────────────── */ :root { --v2-tab-active: var(--v2-pop-sage); --v2-tab-inactive: var(--v2-text-tertiary); } .dark { --v2-tab-active: var(--v2-pop-sage); --v2-tab-inactive: var(--v2-text-tertiary); } /* ─── 9. SPACING (t-shirt) ───────────────────────────────────────────────── */ :root { --v2-space-xs: 4px; --v2-space-sm: 8px; --v2-space-md: 16px; --v2-space-lg: 24px; --v2-space-xl: 32px; --v2-space-2xl: 48px; /* Named aliases */ --v2-space-touch: 44px; /* minimum touch target — never go below */ --v2-space-page-inset: var(--v2-space-md); --v2-space-card-pad: var(--v2-space-md); --v2-space-nav-height: 83px; /* bottom nav + home indicator */ } /* ─── 10. RADIUS ─────────────────────────────────────────────────────────── */ :root { --v2-radius-xs: 4px; /* tags chips — sharp corners */ --v2-radius-sm: 8px; --v2-radius-md: 12px; --v2-radius-lg: 16px; --v2-radius-xl: 24px; --v2-radius-pill: 20px; /* keep existing: general pill shape */ --v2-radius-full: 9999px; } /* ─── 11. MOTION ─────────────────────────────────────────────────────────── */ :root { --v2-ease-out: cubic-bezier(0.2, 0, 0, 1); /* standard — most transitions */ --v2-ease-enter: cubic-bezier(0, 0, 0.2, 1); /* elements arriving */ --v2-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* elements leaving */ --v2-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* playful overshoot — FAB, checkmarks */ --v2-ease-decel: cubic-bezier(0.0, 0.0, 0.2, 1); /* sheet swipe settle */ --v2-transition-fast: 150ms; --v2-transition-base: 240ms; --v2-transition-slow: 380ms; --v2-transition-sheet: 320ms; /* bottom sheet enter/exit */ --v2-transition-fade: 180ms; } @media (prefers-reduced-motion: reduce) { :root { --v2-transition-fast: 0ms; --v2-transition-base: 0ms; --v2-transition-slow: 0ms; --v2-transition-sheet: 0ms; --v2-transition-fade: 0ms; } } /* ─── 12. TYPOGRAPHY ─────────────────────────────────────────────────────── */ /* * Fraunces: anything that IS the content (plant name, streak count, page title) * DM Sans: anything that describes or enables (labels, chips, nav, inputs) */ :root { --v2-font-display: 'Fraunces', Georgia, serif; --v2-font-body: 'DM Sans', system-ui, sans-serif; /* Composite shorthands: weight size/line-height family */ --v2-type-display: 400 clamp(2rem, 6vw, 2.75rem)/1.1 var(--v2-font-display); --v2-type-h1: 400 1.75rem/1.2 var(--v2-font-display); --v2-type-h2: 400 1.375rem/1.3 var(--v2-font-display); --v2-type-h3: 600 1.125rem/1.4 var(--v2-font-display); --v2-type-body: 400 0.9375rem/1.6 var(--v2-font-body); --v2-type-body-sm: 400 0.8125rem/1.5 var(--v2-font-body); --v2-type-caption: 400 0.75rem/1.4 var(--v2-font-body); --v2-type-label: 500 0.75rem/1.4 var(--v2-font-body); /* pair with uppercase + 0.06em tracking */ --v2-type-numeric: 400 1em/1 var(--v2-font-display); /* tabular-nums, always Fraunces */ --v2-type-latin: 400 0.6875rem/1.4 var(--v2-font-body); /* micro — nav labels, timestamps */ } /* ─── 13. INTERACTIVE STATES (gap tokens) ────────────────────────────────── */ :root { --v2-focus-ring: oklch(52% 0.08 162 / 0.5); --v2-press-overlay: oklch(18% 0.02 150 / 0.06); --v2-hover-overlay: oklch(18% 0.02 150 / 0.03); } .dark { --v2-focus-ring: oklch(60% 0.09 162 / 0.6); --v2-press-overlay: oklch(95% 0.006 85 / 0.08); --v2-hover-overlay: oklch(95% 0.006 85 / 0.04); } /* ─── 14. BOTTOM SHEET (gap tokens) ──────────────────────────────────────── */ :root { --v2-sheet-radius: 20px 20px 0 0; /* top corners only */ --v2-sheet-handle-bg: var(--v2-border-strong); --v2-sheet-handle-w: 36px; --v2-sheet-handle-h: 4px; --v2-sheet-shadow: 0 -4px 32px oklch(18% 0.02 150 / 0.18), 0 -1px 4px oklch(18% 0.02 150 / 0.08); } .dark { --v2-sheet-handle-bg: var(--v2-border-strong); --v2-sheet-shadow: 0 -4px 32px oklch(0% 0 0 / 0.5), 0 -1px 4px oklch(0% 0 0 / 0.3); } /* ─── 15. FAB (gap tokens) ───────────────────────────────────────────────── */ :root { --v2-fab-size: 56px; --v2-fab-bg: var(--v2-pop-sage); /* sage green — not inverse */ --v2-fab-color: var(--v2-raw-linen-0); /* linen icon */ --v2-fab-shadow: 0 4px 16px oklch(18% 0.02 150 / 0.22), 0 2px 6px oklch(18% 0.02 150 / 0.14); } .dark { --v2-fab-shadow: 0 4px 16px oklch(0% 0 0 / 0.5), 0 2px 6px oklch(0% 0 0 / 0.35); } /* ─── 16. STAGE RAIL (gap tokens) ────────────────────────────────────────── */ :root { --v2-rail-height: 3px; --v2-rail-track: var(--v2-border-soft); --v2-rail-fill: var(--v2-accent-botanical); --v2-rail-fill-end: var(--v2-accent-botanical-dark); --v2-rail-dot-size: 12px; --v2-rail-dot-active: var(--v2-accent-botanical); --v2-rail-halo: var(--v2-pop-sage-bg); } /* ─── 17. BUTTONS (gap tokens) ───────────────────────────────────────────── */ :root { --v2-btn-height-lg: 48px; --v2-btn-height-md: 44px; /* default — never below touch target */ --v2-btn-height-sm: 36px; --v2-btn-radius: var(--v2-radius-md); /* 12px */ --v2-btn-weight: 500; --v2-btn-tracking: 0.04em; } /* ─── 18. CHIPS (gap tokens) — Tags style (canonical) ───────────────────── */ /* * Sharp corners, uppercase, compact. Not pills. * Background: always the -bg variant of the pop, never the pop itself. */ :root { --v2-chip-height: 24px; --v2-chip-radius: var(--v2-radius-xs); /* 4px — sharp corners */ --v2-chip-size: 10px; --v2-chip-weight: 500; --v2-chip-tracking: 0.04em; --v2-chip-transform: uppercase; --v2-chip-gap: var(--v2-space-xs); } /* ─── 19. PLANT-OUT CHIPS — container_type radio group ──────────────────── */ /* * Used in the Plant Out sheet (#140 + #297). Tags-style chip visual, * radio-group semantics, ≥44pt tap area via vertical padding on the row. */ .po-chip-row { display: flex; flex-wrap: wrap; gap: var(--v2-chip-gap); padding: 10px 0; } .po-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border-radius: var(--v2-chip-radius); border: 1px solid var(--v2-border-soft); background: var(--v2-bg-card); color: var(--v2-text-secondary); font-family: var(--v2-font-body); font-size: var(--v2-chip-size); font-weight: var(--v2-chip-weight); letter-spacing: var(--v2-chip-tracking); text-transform: var(--v2-chip-transform); cursor: pointer; transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 100ms ease-out; -webkit-tap-highlight-color: transparent; } .po-chip:hover { background: var(--v2-bg-card-hover); } .po-chip:active { transform: scale(0.97); } .po-chip:focus-visible { outline: 2px solid var(--v2-accent-botanical); outline-offset: 2px; } .po-chip--selected { background: var(--v2-accent-botanical); border-color: var(--v2-accent-botanical); color: var(--v2-text-on-dark); } .po-chip--selected:hover { background: var(--v2-accent-botanical-dark); }