/* ============================================================ Rewir · Design tokens — single source of truth for rewir.app ------------------------------------------------------------ Load this BEFORE any page stylesheet: Brand anchors come from assets/logo.svg: #0A3C30 (green) · #93A071 (sage) · #FC6F3F (coral) Shipped app/site values (#1F3D34, #A6B68A, #FF8A6A) are kept as ramp steps — identity preservation across app, admin, web. The site is light-only by design: the iOS app ships light-only, and the marketing surface follows the product. Contrast ratios quoted below are measured WCAG 2.1 values against --color-bg (#FBF7F2) unless stated otherwise. Full table: design-system/README.md. ============================================================ */ :root { /* ---------------------------------------------------------- 1 · PRIMITIVES — color ramps ---------------------------------------------------------- */ /* Neutral ramp (warm paper → ink), 11 steps */ --n-0: #FFFDF8; /* card surface */ --n-50: #FBF7F2; /* page canvas (cream) */ --n-100: #F4ECE0; /* inset zones, deep cream */ --n-200: #E8E0D4; /* hairlines, borders */ --n-300: #D6CCBD; /* strong borders, disabled fills */ --n-400: #A9AB9F; /* decorative marks only — never text */ --n-500: #8A918C; /* 3.02:1 — decorative / ≥24px only */ --n-600: #5C6762; /* 5.51:1 — muted body text (AA) */ --n-700: #3D4742; /* 9.04:1 — strong muted text */ --n-800: #25302B; /* near-ink */ --n-900: #13201C; /* ink — 15.74:1 */ /* Brand green ramp — logo #0A3C30 is step 700 */ --green-50: #E9F0EC; --green-100: #D3E2DA; --green-200: #A8C5B6; --green-300: #6E9A87; --green-400: #3F705F; --green-500: #245044; /* hover/pressed primary (shipped) */ --green-600: #1F3D34; /* primary brand green (shipped) — 11.09:1 */ --green-700: #0A3C30; /* logo green — 11.57:1 */ --green-800: #082A21; --green-900: #051C16; /* Sage ramp — logo #93A071 is step 400 */ --sage-100: #DDE6CF; /* tints, icon chips (shipped) */ --sage-200: #C4D2A8; /* (shipped) */ --sage-300: #A6B68A; /* graphic sage (shipped) — never text on light */ --sage-400: #93A071; /* logo sage — graphic only */ --sage-500: #76845A; --sage-600: #576440; /* 5.0:1 — sage-toned text if ever needed */ /* Coral accent ramp — logo #FC6F3F is step 500 */ --coral-50: #FFEFE7; /* wash (shipped coral-soft) */ --coral-100: #FFE3DA; /* tint (shipped coral-light) */ --coral-200: #FFC4AE; --coral-300: #FFA88C; --coral-400: #FF8A6A; /* shipped soft coral — graphic only (2.16:1) */ --coral-500: #FC6F3F; /* logo coral — graphic fills, route lines (2.63:1, not text on light) */ --coral-600: #DE5526; /* 3.62:1 — large text only (≥24px, or ≥19px bold) */ --coral-700: #B23F14; /* 5.45:1 — AA: links + small accent text */ --coral-800: #8F3210; --coral-900: #6B250B; /* Water blue (info / map water) */ --water-100: #D7EEF1; --water-300: #A9D4DA; /* graphic only */ --water-600: #3F6470; /* 5.6:1 — info text */ /* Status (chip background + same-hue darkened text) */ --success-bg: #DDEBC9; --success-text: #3F6B22; --warning-bg: #FBE7C2; --warning-text: #8A5E10; --danger-bg: #FBD9D1; --danger-text: #A83925; /* ---------------------------------------------------------- 2 · SEMANTIC COLOR ---------------------------------------------------------- */ --color-bg: var(--n-50); /* page canvas */ --color-bg-deep: var(--n-100); /* alternating bands, insets */ --color-surface: var(--n-0); /* cards, panels */ --color-surface-muted: #F1EADF; /* inputs, hover rows (shipped, off-ramp) */ --color-border: var(--n-200); --color-border-soft: #F1EADF; --color-text: var(--n-900); /* body — 15.74:1 */ --color-text-muted: var(--n-600); /* secondary — 5.51:1 (AA) */ --color-text-strong: var(--n-700); /* emphasized muted — 9.04:1 */ --color-heading: var(--green-600); --color-brand: var(--green-600); --color-brand-hover: var(--green-500); --color-brand-strong: var(--green-700); --color-accent: var(--coral-500); /* graphic accent (dots, fills, progress) */ --color-accent-soft: var(--coral-50); --color-accent-text: var(--coral-700); /* 5.45:1 — links, small accent copy */ --color-accent-display:var(--coral-600); /* 3.62:1 — accent words inside large headings only */ /* On dark surfaces (green-600 panels, footer, strip) */ --color-on-dark: #FBF7F2; /* 11.09:1 on green-600 */ --color-on-dark-muted: rgba(251,247,242,0.80); /* 7.6:1 */ --color-on-dark-soft: rgba(251,247,242,0.66); /* 5.8:1 — captions, fine print */ --color-accent-on-dark: var(--coral-400); /* 5.12:1 on green-600 — accent words on dark */ /* Focus — set --focus-color: var(--color-on-dark) inside dark sections */ --focus-color: var(--green-600); /* ---------------------------------------------------------- 3 · TYPOGRAPHY Families: Nunito (display/headings) + Manrope (body). Two only. Scale: modular, ratio 1.25 on 1rem base 0.8 · 1 · 1.118(½ step) · 1.25 · 1.5625 · 1.953 · 2.441 · 3.052 · 3.815 ---------------------------------------------------------- */ --font-display: 'Nunito', system-ui, -apple-system, sans-serif; --font-body: 'Manrope', system-ui, -apple-system, sans-serif; --fs-xs: 0.8rem; /* 12.8px — captions, labels, fine print (floor: no smaller text) */ --fs-sm: 1rem; /* 16px — body */ --fs-md: 1.118rem; /* 17.9px — ledes, body-lg (ratio^0.5 half-step) */ --fs-lg: 1.25rem; /* 20px — h4, card titles */ --fs-xl: 1.5625rem; /* 25px — h3 */ --fs-2xl: clamp(1.7rem, 1.32rem + 1.7vw, 2.441rem); /* h2 — 27→39px */ --fs-3xl: clamp(2.05rem, 1.5rem + 2.5vw, 3.052rem); /* h1 — 33→49px */ --fs-disp: clamp(2.45rem, 1.55rem + 4.1vw, 3.815rem); /* display/hero — 39→61px */ --lh-display: 1.02; --lh-heading: 1.1; --lh-subhead: 1.22; --lh-body: 1.6; --lh-tight: 1.45; --ls-display: -0.025em; --ls-heading: -0.018em; --ls-label: 0.06em; /* uppercase labels */ --fw-body: 500; /* Manrope default body weight */ --fw-semibold: 600; --fw-bold: 700; --fw-heading: 800; /* Nunito headings */ --fw-black: 900; /* brand wordmark, display */ /* Tabular numerals wherever numbers align (prices, stats) */ --num-tabular: tabular-nums; /* ---------------------------------------------------------- 4 · SPACING — 4px base scale. No magic numbers in layout. ---------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* Section rhythm (fluid, lands on the scale at both ends) */ --section-pad: clamp(var(--sp-8), 9vw, var(--sp-10)); --section-gap-s: clamp(var(--sp-6), 5vw, var(--sp-7)); /* ---------------------------------------------------------- 5 · RADIUS · BORDERS · ELEVATION 3 radius tokens + pill; 3 shadow levels + 1 colored button shadow. Prefer border + soft shadow over heavy drops. ---------------------------------------------------------- */ --r-sm: 12px; /* chips, inputs, small cards */ --r-md: 20px; /* cards, panels */ --r-lg: 32px; /* feature panels, big bands */ --r-pill: 999px; /* buttons, badges — Rewir's marketing signature */ --shadow-1: 0 1px 2px rgba(19, 32, 28, 0.05); /* micro: inputs, tiles */ --shadow-2: 0 12px 32px rgba(19, 32, 28, 0.06), 0 1px 0 rgba(19, 32, 28, 0.02); /* cards */ --shadow-3: 0 24px 48px rgba(19, 32, 28, 0.10), 0 2px 0 rgba(19, 32, 28, 0.04); /* raised: popovers, hero chips */ --shadow-btn: 0 8px 16px rgba(31, 61, 52, 0.22); /* primary button (green-tinted) */ /* ---------------------------------------------------------- 6 · MOTION 120ms = micro feedback (hover, press, focus) 200ms = state changes (fades, accordion, color) 320ms = entrances + large-surface moves ease-standard — most transitions (quick start, soft landing) ease-out — entrances; decelerate into place ease-spring — tiny playful elements only (chips, copied-toast); never on large surfaces Animate transform + opacity only. ---------------------------------------------------------- */ --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.3, 1.4, 0.4, 1); /* ---------------------------------------------------------- 7 · Z-INDEX (semantic, never arbitrary) ---------------------------------------------------------- */ --z-base: 0; --z-raised: 2; --z-sticky: 10; --z-overlay: 40; --z-toast: 60; /* ---------------------------------------------------------- 8 · LAYOUT ---------------------------------------------------------- */ --container: 1200px; --container-narrow: 760px; --gutter: clamp(20px, 4vw, 32px); --tap-min: 44px; /* minimum touch target */ } /* ============================================================ Global token-level behavior ============================================================ */ /* Visible, consistent keyboard focus everywhere. Dark sections override --focus-color to var(--color-on-dark). */ :focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: 4px; } /* Reduced motion: kill all non-essential animation and smooth scroll. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto !important; } }