/* ========================================================================= LÜDI LAWNS & GARDENS — Design Tokens Refined botanical · premium garden services · outdoor-readable ========================================================================= */ :root { /* ---- Brand color ------------------------------------------------------ */ --ludi-charcoal: #3d4e4a; /* primary — slate charcoal */ --ludi-charcoal-ink: #2a3734; /* pressed / text on cream */ --ludi-charcoal-soft: #546663; /* secondary text / icon */ --ludi-wattle: #d8c84a; /* accent — wattle yellow */ --ludi-wattle-deep: #b8a92e; /* wattle hover/active */ --ludi-wattle-soft: #ede5a5; /* wattle tint background */ --ludi-cream: #f2f0e8; /* page / canvas background */ --ludi-cream-deep: #e8e5d8; /* alt surface */ --ludi-paper: #fbfaf4; /* elevated surface (cards) */ --ludi-border: #dde0d8; /* hairline borders */ --ludi-border-strong: #c5cabe; /* stronger divider */ /* ---- Semantic / status ----------------------------------------------- */ --ludi-synced: #5c8a5c; /* sage green — synced */ --ludi-pending: #c98a2e; /* amber — pending / offline */ --ludi-danger: #9e4a3a; /* earthy rust — destructive */ --ludi-info: #4b6d80; /* muted botanical blue */ /* ---- Surfaces / foreground aliases ----------------------------------- */ --fg-1: var(--ludi-charcoal-ink); /* headings, primary text */ --fg-2: var(--ludi-charcoal); /* body */ --fg-3: var(--ludi-charcoal-soft); /* secondary / captions */ --fg-on-accent: var(--ludi-charcoal-ink); --fg-on-dark: var(--ludi-cream); --bg-page: var(--ludi-cream); --bg-surface: var(--ludi-paper); --bg-raised: #ffffff; --bg-sunken: var(--ludi-cream-deep); --bg-accent: var(--ludi-wattle); --bg-accent-soft: var(--ludi-wattle-soft); --bg-dark: var(--ludi-charcoal); --border: var(--ludi-border); --border-strong: var(--ludi-border-strong); /* ---- Type families --------------------------------------------------- */ --font-display: Georgia, "Iowan Old Style", "Source Serif Pro", "Noto Serif", Cambria, "Times New Roman", Times, serif; --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ---- Type scale (mobile-first, outdoor-readable) --------------------- */ /* Generous sizes because the app is used in sunlight on phones. */ --fs-display: 34px; /* screen headers in serif */ --fs-h1: 28px; --fs-h2: 22px; --fs-h3: 18px; --fs-body: 17px; /* base body — one step up from iOS default */ --fs-body-sm: 15px; --fs-label: 13px; /* field labels, eyebrows */ --fs-caption: 12px; --fs-price: 30px; /* money display */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.65; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.14em; /* ALL-CAPS labels */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Spacing (4px base) --------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; /* ---- Radii (gentle, not bubble-ish) --------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* cards */ --radius-xl: 24px; /* hero surfaces */ --radius-pill: 999px; /* pills, chips, buttons */ /* ---- Shadows (soft, botanical — never drop-shadow heavy) ------------ */ --shadow-1: 0 1px 0 rgba(61, 78, 74, 0.04), 0 1px 2px rgba(61, 78, 74, 0.06); --shadow-2: 0 1px 0 rgba(61, 78, 74, 0.04), 0 2px 6px rgba(61, 78, 74, 0.08), 0 8px 20px -8px rgba(61, 78, 74, 0.10); --shadow-3: 0 2px 4px rgba(61, 78, 74, 0.06), 0 12px 28px -10px rgba(61, 78, 74, 0.18); --shadow-focus: 0 0 0 3px rgba(216, 200, 74, 0.45); /* wattle focus ring */ --shadow-inset: inset 0 1px 2px rgba(61, 78, 74, 0.06); /* ---- Motion --------------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 360ms; /* ---- Touch targets (mobile-first) ----------------------------------- */ --touch-min: 44px; /* iOS minimum */ --touch-comfy: 52px; /* primary actions */ --touch-large: 60px; /* hero CTA in sunlight */ } /* ========================================================================= Semantic element defaults — apply font-family + size at the element level so authors can just write

,

,