/* ===================================================================== Remly "Glass" design tokens · v0.1 · source of truth for the web --------------------------------------------------------------------- Same values as tokens.json (platform-neutral). If you change one, change both. starter/tokens.css is a byte-for-byte copy of this file (cp spec/tokens.css spec/starter/tokens.css after any edit). Where values come from (concept files in design-concepts/): 6-liquid-glass.html = primary base (glass recipe, dark mode, tab bar, sheets) 2-beautiful.html = frosted cards, sticky nav bar, Today dashboard 8-glass-pipeline.html = pipeline columns + job cards, dark scrim 10-calendar-glass.html= calm wallpaper, events, Remy ghost slots Anything marked NEW was not in a concept and was added for readability or accessibility. Do not add values outside this file; extend it. ===================================================================== */ :root { color-scheme: light dark; /* ---------- Colour: text ---------- */ --ink: #0d0f1a; /* c6 --ink. Primary text, 19:1 on white */ --text-2: rgba(13, 15, 26, .62); /* c6 --mut .58 -> .62 (NEW: +contrast, ~5.6:1 on solid) */ --text-3: rgba(13, 15, 26, .45); /* NEW. Placeholders and disabled only. Never body copy */ --text-on-accent: #ffffff; /* ---------- Colour: the one accent ---------- */ --accent: #ff5a1f; /* c6 --acc. Fills, icons, indicators, active tab. NOT small text */ --accent-text: #c2410c; /* NEW. Accent used as text/links. 5.2:1 on white */ --accent-strong: #c2410c; /* NEW. Primary button fill. White label 5.2:1 */ --accent-sheen: #e2561a; /* c6 CTA gradient top, darkened so the label stays >= 4.5:1 */ --accent-soft: rgba(255, 90, 31, .16); /* c6 .tag background (.18 -> .16) */ --accent-glow: 0 10px 24px rgba(255, 90, 31, .35); /* c6 .cta shadow */ /* ---------- Colour: status (text on soft fill) ---------- */ --ok: #15803d; --ok-soft: rgba(22, 163, 74, .14); /* c2 --ok family, darkened for text */ --warn: #b45309; --warn-soft: rgba(234, 179, 8, .18); /* c2 "Quoted" pill */ --danger: #b91c1c; --danger-soft: rgba(239, 68, 68, .14); /* NEW. Errors, failed sends, opted out */ --info: #1d4ed8; --info-soft: rgba(59, 130, 246, .14); /* c2 "New" pill */ --neutral: rgba(13, 15, 26, .62); --neutral-soft: rgba(13, 15, 26, .07); /* ---------- Colour: lead stages (dot + bar colour, c8; text uses --stage-*-text) ---------- */ --stage-new: #60a5fa; --stage-new-text: #1d4ed8; --stage-contacted: #22d3ee; --stage-contacted-text: #0e7490; /* NEW stage colour (contract status) */ --stage-quoted: #fbbf24; --stage-quoted-text: #b45309; --stage-scheduled: #a78bfa; --stage-scheduled-text: #6d28d9; /* c8 "Booked" */ --stage-closed: #34d399; --stage-closed-text: #15803d; /* shown as "Done" */ --stage-collections: #f472b6; --stage-collections-text: #be185d; /* c8 "Paid" colour reused */ --stage-lost: #94a3b8; --stage-lost-text: #475569; --urgent: #ef4444; --urgent-text: #b91c1c; /* urgent is a FLAG, not a column */ /* ---------- Colour: channels (avatar badge + chip) ---------- */ --ch-sms: #007aff; /* channel colours = the shipping apps (DesignSystem/Palette.swift) */ --ch-whatsapp: #25d366; --ch-web: #6b7280; --ch-voicemail: #a855f7; --ch-email: #64748b; /* ---------- Remy identity (NOT an action colour) ---------- */ --remy-gradient: conic-gradient(from 0deg, #ff6a2b, #ff5fa2, #7b6cff, #3fd0ff, #ff6a2b); /* c6 .remyb */ --remy-glow: 0 0 18px rgba(255, 95, 162, .6); --remy-tint: rgba(123, 108, 255, .10); /* NEW. Background wash on Remy-authored surfaces */ --remy-edge: rgba(123, 108, 255, .45); /* ---------- Wallpapers (the thing glass sits on) ---------- */ /* vivid = c6 (Today only). calm = c10 (every other screen). */ --w1: #ff9a62; --w2: #ff5fa2; --w3: #7b6cff; --w4: #3fd0ff; --w5: #ffe27a; --wall-vivid: radial-gradient(60% 45% at 15% 10%, var(--w5), transparent 70%), radial-gradient(55% 45% at 90% 15%, var(--w2), transparent 70%), radial-gradient(60% 50% at 10% 70%, var(--w3), transparent 70%), radial-gradient(60% 50% at 95% 85%, var(--w4), transparent 70%), linear-gradient(160deg, var(--w1), var(--w3)); --wall-calm-base: #eef1ff; --wall-calm: radial-gradient(60% 35% at 100% 0%, #ffc4a8, transparent 70%), radial-gradient(60% 40% at 0% 40%, #c9c2ff, transparent 70%), radial-gradient(70% 40% at 100% 100%, #a8e6ff, transparent 70%); --wall-calm-opacity: 1; /* ---------- Materials ---------- */ /* 1. Glass (chrome: nav bar when scrolled, tab bar, floating buttons, segmented). c6 .gl */ --glass-fill: rgba(255, 255, 255, .34); --glass-fill-strong: rgba(255, 255, 255, .55); /* c6 --g2: selected lens, sheets, chips on glass */ --glass-blur: 22px; --glass-saturate: 1.9; --glass-brightness: 1.06; --glass-edge: rgba(255, 255, 255, .75); /* gradient rim, top-left + bottom-right */ --glass-edge-2: rgba(255, 255, 255, .18); /* inner bottom/side line */ --glass-highlight: rgba(255, 255, 255, .9); /* 1px inner top highlight */ --glass-shadow: 0 18px 40px rgba(40, 20, 90, .18); --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness)); /* 2. Frosted card (short, glanceable content: stat tiles, hero, chart). c2 .card */ --frost-fill: rgba(255, 255, 255, .72); --frost-blur: 30px; --frost-border: rgba(255, 255, 255, .8); --frost-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 30px rgba(20, 20, 40, .08); --frost-filter: blur(var(--frost-blur)) saturate(1.8); /* 3. Solid surface (dense content: lists, threads, transcripts, forms). NEW, see 01-principles */ --surface: rgba(255, 255, 255, .94); --surface-raised: #ffffff; --surface-sunken: rgba(13, 15, 26, .05); /* inputs, waveform track, grouped rows */ --surface-filter: blur(30px) saturate(1.4); --line: rgba(0, 0, 0, .07); /* c2 --line hairlines */ --line-strong: rgba(0, 0, 0, .14); /* Scrim behind sheets. c6 .18 light; c8 .35 used for dark */ --scrim: rgba(0, 0, 0, .18); /* ---------- Type (rem so the prototype can mimic Dynamic Type: 1rem = 16px at default) ---------- */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Roboto", system-ui, sans-serif; --font-rounded: "SF Pro Rounded", ui-rounded, var(--font); /* size line weight tracking */ --t-display: 2.5rem; /* 40 1.02 800 -1.4px c6 h1 */ --t-hero: 4rem; /* 64 .9 800 -3px c6 .hero .big */ --t-large-title: 1.875rem; /* 30 1.1 800 -0.8px c6 inbox header, c8 h1 */ --t-title: 1.375rem; /* 22 1.2 800 -0.4px sheet titles c6/c8/c10, c2 h2 */ --t-stat: 1.75rem; /* 28 1.0 800 -1px c6 .stat b */ --t-headline: 1.0625rem; /* 17 1.3 700 nav title c2 .mini */ --t-row-title: 1rem; /* 16 1.3 700 c6 .it b */ --t-body: 1rem; /* 16 1.45 450 c6 .inner p 15.5 -> 16 */ --t-subhead: 0.875rem; /* 14 1.35 550 c2 meta (c6 13.5 -> 14 for sunlight) */ --t-footnote: 0.8125rem; /* 13 1.3 600 pills, chips small */ --t-caption: 0.78125rem;/* 12.5 1.3 650 timestamps c6 .r */ --t-label: 0.75rem; /* 12 1.2 750 +0.5px uppercase c6 .inner .k */ --t-section: 0.8125rem; /* 13 1.2 750 +0.7px uppercase c6 h3 */ --t-tab: 0.6875rem; /* 11 1.0 700 c6 10.5 -> 11 (minimum legible) */ --t-tag: 0.75rem; /* 12 1.0 750 c6 .tag 11 -> 12 */ --w-regular: 450; --w-medium: 550; --w-semibold: 650; --w-bold: 700; --w-heavy: 750; --w-black: 800; /* ---------- Spacing (4pt grid, plus the 2/6/10/14 half-steps the concepts use) ---------- */ --s-0: 2px; --s-1: 4px; --s-1h: 6px; --s-2: 8px; --s-2h: 10px; --s-3: 12px; --s-3h: 14px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --gutter: 16px; /* c6 screen side padding (c2 used 18) */ --tabbar-clearance: 130px; /* c6 bottom padding so content clears the floating tab bar */ --tap-min: 44px; /* NEW hard floor for every hit target */ /* ---------- Radii ---------- */ --r-xs: 9px; /* grabber, progress bars */ --r-sm: 12px; /* icon tiles (c6 .stat i) */ --r-md: 16px; /* calendar event, small buttons (c10 .ev, c8 .moves) */ --r-lg: 20px; /* job card, inner boxes, nudge (c8 .card/.box) */ --r-xl: 22px; /* list row press, inner panels, action tiles (c6 .it/.inner/.act) */ --r-2xl: 30px; /* glass/frosted group cards (c6 .gl; c2 used 28) */ --r-sheet: 38px; /* c6 .sheet (c8 34, c10 32) */ --r-pill: 999px; /* ---------- Elevation ---------- */ --e-0: none; --e-1: var(--frost-shadow); /* cards */ --e-2: var(--glass-shadow); /* glass chrome */ --e-3: var(--glass-shadow), 0 20px 40px rgba(0, 0, 0, .12); /* floating tab bar (c2) */ --e-drag: 0 26px 50px rgba(0, 0, 0, .45); /* dragged job card (c8 .ghost) */ --z-content: 1; --z-nav: 10; --z-tabbar: 20; --z-scrim: 30; --z-sheet: 31; --z-toast: 50; --z-drag: 60; /* ---------- Motion ---------- */ /* Names match the native Motion enum (remly-ios DesignSystem/Motion.swift). */ --ease-signature: cubic-bezier(.2, .85, .25, 1); /* shell.css push. Native: spring 0.253s / 0.86 */ --ease-press: cubic-bezier(.3, 1.5, .5, 1); /* c6 .tap. Native: spring 0.209s / 0.72 */ --ease-lens: cubic-bezier(.3, 1.5, .45, 1); /* c6 tab lens, c10 toggle knob */ --ease-sheet: cubic-bezier(.2, 1.05, .3, 1); /* c8/c10 sheet (c6 had 1.1 overshoot) */ --ease-rise: cubic-bezier(.2, .9, .3, 1); /* c6 .fade-in rise */ --ease-tint: ease-out; /* Native Motion.tint: colour never springs */ --d-tint: 180ms; --d-press: 300ms; --d-fade: 350ms; --d-push: 420ms; --d-sheet: 450ms; --d-lens: 550ms; --d-rise: 600ms; --d-toast: 300ms; --d-toast-hold: 1900ms; --rise-stagger: 50ms; /* c6 used 50ms; native uses 16ms. Web keeps 50ms, first 6 items only */ --press-scale: .97; /* c6 .965, c2 .975, c8 .97 -> .97 */ --remy-spin: 7s; /* c6 orb rotation */ --auto-send-countdown: 5s; /* Native Motion.autoSendCountdown. Behaviour, not decoration */ } /* ===================== Dark ===================== */ /* Applied when the OS is dark (unless the page forces light) or when is set by the prototype's theme toggle. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #f4f5fb; --text-2: rgba(244, 245, 251, .66); --text-3: rgba(244, 245, 251, .45); --accent-text: #ff8a5c; --accent-soft: rgba(255, 106, 43, .22); --ok: #34d399; --ok-soft: rgba(52, 211, 153, .16); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .16); --danger: #f87171; --danger-soft: rgba(248, 113, 113, .16); --info: #60a5fa; --info-soft: rgba(96, 165, 250, .16); --neutral: rgba(244, 245, 251, .66); --neutral-soft: rgba(255, 255, 255, .08); --stage-new-text: #60a5fa; --stage-contacted-text: #22d3ee; --stage-quoted-text: #fbbf24; --stage-scheduled-text: #a78bfa; --stage-closed-text: #34d399; --stage-collections-text: #f472b6; --stage-lost-text: #94a3b8; --urgent-text: #f87171; --remy-tint: rgba(123, 108, 255, .16); --w1: #b23a12; --w2: #8a1f5c; --w3: #2a1f8f; --w4: #065a7a; --w5: #6b4a00; --wall-calm-base: #0c0e1d; --wall-calm-opacity: .35; --glass-fill: rgba(30, 32, 48, .36); --glass-fill-strong: rgba(40, 42, 60, .55); --glass-edge: rgba(255, 255, 255, .28); --glass-edge-2: rgba(255, 255, 255, .05); --glass-highlight: rgba(255, 255, 255, .35); --glass-shadow: 0 18px 40px rgba(0, 0, 0, .45); --frost-fill: rgba(28, 28, 32, .66); --frost-border: rgba(255, 255, 255, .14); --frost-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 10px 30px rgba(0, 0, 0, .4); --surface: rgba(22, 24, 36, .94); --surface-raised: #1c1f2e; --surface-sunken: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16); --scrim: rgba(0, 0, 0, .35); } } :root[data-theme="dark"] { --ink: #f4f5fb; --text-2: rgba(244, 245, 251, .66); --text-3: rgba(244, 245, 251, .45); --accent-text: #ff8a5c; --accent-soft: rgba(255, 106, 43, .22); --ok: #34d399; --ok-soft: rgba(52, 211, 153, .16); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .16); --danger: #f87171; --danger-soft: rgba(248, 113, 113, .16); --info: #60a5fa; --info-soft: rgba(96, 165, 250, .16); --neutral: rgba(244, 245, 251, .66); --neutral-soft: rgba(255, 255, 255, .08); --stage-new-text: #60a5fa; --stage-contacted-text: #22d3ee; --stage-quoted-text: #fbbf24; --stage-scheduled-text: #a78bfa; --stage-closed-text: #34d399; --stage-collections-text: #f472b6; --stage-lost-text: #94a3b8; --urgent-text: #f87171; --remy-tint: rgba(123, 108, 255, .16); --w1: #b23a12; --w2: #8a1f5c; --w3: #2a1f8f; --w4: #065a7a; --w5: #6b4a00; --wall-calm-base: #0c0e1d; --wall-calm-opacity: .35; --glass-fill: rgba(30, 32, 48, .36); --glass-fill-strong: rgba(40, 42, 60, .55); --glass-edge: rgba(255, 255, 255, .28); --glass-edge-2: rgba(255, 255, 255, .05); --glass-highlight: rgba(255, 255, 255, .35); --glass-shadow: 0 18px 40px rgba(0, 0, 0, .45); --frost-fill: rgba(28, 28, 32, .66); --frost-border: rgba(255, 255, 255, .14); --frost-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 10px 30px rgba(0, 0, 0, .4); --surface: rgba(22, 24, 36, .94); --surface-raised: #1c1f2e; --surface-sunken: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16); --scrim: rgba(0, 0, 0, .35); } /* ===================== Accessibility fallbacks ===================== */ /* Reduce Transparency (iOS) / no-blur Android: every material becomes opaque. The prototype can force this with . */ @media (prefers-reduced-transparency: reduce) { :root:not([data-transparency="full"]) { --glass-fill: #f4f5fa; --glass-fill-strong: #ffffff; --frost-fill: #ffffff; --surface: #ffffff; --glass-filter: none; --frost-filter: none; --surface-filter: none; --glass-edge: rgba(0, 0, 0, .10); --glass-edge-2: transparent; --glass-highlight: transparent; --frost-border: rgba(0, 0, 0, .10); --wall-calm-opacity: 0; --scrim: rgba(0, 0, 0, .4); } } :root[data-transparency="reduced"] { --glass-fill: #f4f5fa; --glass-fill-strong: #ffffff; --frost-fill: #ffffff; --surface: #ffffff; --glass-filter: none; --frost-filter: none; --surface-filter: none; --glass-edge: rgba(0, 0, 0, .10); --glass-edge-2: transparent; --glass-highlight: transparent; --frost-border: rgba(0, 0, 0, .10); --wall-calm-opacity: 0; --scrim: rgba(0, 0, 0, .4); } /* Reduced transparency in dark */ @media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) { :root:not([data-transparency="full"]):not([data-theme="light"]) { --glass-fill: #1c1e2b; --glass-fill-strong: #262938; --frost-fill: #1c1e2b; --surface: #161824; --glass-edge: rgba(255, 255, 255, .14); --frost-border: rgba(255, 255, 255, .14); } } :root[data-transparency="reduced"][data-theme="dark"] { --glass-fill: #1c1e2b; --glass-fill-strong: #262938; --frost-fill: #1c1e2b; --surface: #161824; --glass-edge: rgba(255, 255, 255, .14); --frost-border: rgba(255, 255, 255, .14); } /* Increase Contrast: stronger secondary text, visible borders, solid chrome. */ @media (prefers-contrast: more) { :root:not([data-contrast="normal"]) { --text-2: rgba(13, 15, 26, .82); --text-3: rgba(13, 15, 26, .65); --line: rgba(0, 0, 0, .22); --line-strong: rgba(0, 0, 0, .4); --glass-fill: rgba(255, 255, 255, .86); --frost-fill: rgba(255, 255, 255, .96); --surface: #ffffff; --glass-edge: rgba(0, 0, 0, .35); --frost-border: rgba(0, 0, 0, .35); } } :root[data-contrast="more"] { --text-2: rgba(13, 15, 26, .82); --text-3: rgba(13, 15, 26, .65); --line: rgba(0, 0, 0, .22); --line-strong: rgba(0, 0, 0, .4); --glass-fill: rgba(255, 255, 255, .86); --frost-fill: rgba(255, 255, 255, .96); --surface: #ffffff; --glass-edge: rgba(0, 0, 0, .35); --frost-border: rgba(0, 0, 0, .35); } :root[data-contrast="more"][data-theme="dark"] { --text-2: rgba(244, 245, 251, .86); --text-3: rgba(244, 245, 251, .7); --line: rgba(255, 255, 255, .3); --line-strong: rgba(255, 255, 255, .5); --glass-fill: rgba(22, 24, 36, .9); --frost-fill: #1c1e2b; --surface: #161824; --glass-edge: rgba(255, 255, 255, .45); --frost-border: rgba(255, 255, 255, .45); } /* Reduce Motion: everything lands at its end state. Components read --d-* so this is one switch. */ @media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) { --d-press: 0ms; --d-fade: 0ms; --d-push: 0ms; --d-sheet: 0ms; --d-lens: 0ms; --d-rise: 0ms; --d-toast: 0ms; --rise-stagger: 0ms; --press-scale: 1; --remy-spin: 0s; } } :root[data-motion="reduced"] { --d-press: 0ms; --d-fade: 0ms; --d-push: 0ms; --d-sheet: 0ms; --d-lens: 0ms; --d-rise: 0ms; --d-toast: 0ms; --rise-stagger: 0ms; --press-scale: 1; --remy-spin: 0s; }