/* ============================================================================= Bec & Will Design System theme.css A drop-in look-and-feel for every app. Warm, rounded, calm, accessibility-first (Bec Broomsticks tokens, Tiimo-inspired). USE IT: The CSS custom properties below are the real contract build with var(--ds-*) and your app inherits the system + theme switching for free. Component classes (.ds-btn, .ds-card, …) are convenience on top. Fonts: Recoleta (display) is a paid font; we fall back to Fraunces (free, Google Fonts, same warm rounded-serif feel) so it looks right out of the box. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap"); /* ---- theme-independent tokens (same on every surface) --------------------- */ :root { /* brand */ --ds-lavender: #AF8DFF; --ds-lavender-strong: #9F85FF; --ds-lavender-tint: #ECE7FF; --ds-interactive: #706DE3; --ds-accent: var(--ds-lavender); /* alias: the brand colour */ /* category accents (pastel set, sit on any surface) */ --ds-cat-lime: #EAFBA9; --ds-cat-lavender: #AF8DFF; --ds-cat-sage: #D4DFAB; --ds-cat-coral: #C85E71; --ds-cat-sky: #95C8DB; --ds-cat-periwinkle: #B8ACD4; /* priority */ --ds-prio-high: #7C5157; --ds-prio-medium: #A28760; /* radii */ --ds-radius-pill: 999px; --ds-radius-card: 16px; --ds-radius-sm: 8px; /* spacing scale (4px base) */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-8: 48px; /* type */ --ds-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ds-font-display: "Recoleta", "Fraunces", Georgia, "Times New Roman", serif; --ds-text-hero: clamp(34px, 5vw, 56px); --ds-text-h1: 32px; --ds-text-h2: 26px; --ds-text-h3: 19px; --ds-text-body: 16px; --ds-text-small: 13px; /* depth */ --ds-shadow-soft: rgba(22,22,19,.18) 0 40px 30px -30px; --ds-shadow-warm: rgba(217,119,87,.24) 0 40px 80px 0; --ds-shadow-card: rgba(0,0,0,.06) 0 4px 12px 0; /* motion + layout */ --ds-transition: .2s ease; --ds-maxw: 980px; /* Streamline icons are recoloured to the rich brand purple, which reads on light AND dark surfaces shown as-is everywhere. Icons sitting on lavender accent buttons (play, toggled-on chips) are flattened white. */ --icon-filter: none; --play-ico-filter: brightness(0) invert(1); /* fine grain/noise overlay (apply with .ds-grain) */ --ds-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); /* default surfaces = "App · Light" so apps work with no data-theme set */ --ds-bg: #FFFFFF; --ds-surface: #EDEBE9; --ds-surface-2: #F6F5F4; --ds-surface-3: #FCFCFC; --ds-text: #111717; --ds-text-2: #363636; --ds-text-muted: #A7A7A7; --ds-border: #E2DFDB; --ds-btn-primary-bg: #161212; --ds-btn-primary-fg: #FFFFFF; --ds-btn-secondary-bg: #E5E0DA; --ds-btn-secondary-fg: #161213; --ds-hero-glow: none; } /* ---- App · Dark ---------------------------------------------------------- */ html[data-theme="dark"] { --ds-bg: #040404; --ds-surface: #121212; --ds-surface-2: #1B1B1B; --ds-surface-3: #363636; --ds-text: #FFFFFF; --ds-text-2: #E1E1E1; --ds-text-muted:#787878; --ds-border: #262626; --ds-btn-primary-bg: #FFFFFF; --ds-btn-primary-fg: #161213; --ds-btn-secondary-bg: #1B1B1B; --ds-btn-secondary-fg: #FFFFFF; --ds-shadow-card: rgba(0,0,0,.4) 0 6px 16px 0; --ds-hero-glow: radial-gradient(circle at 100% 0%, rgba(159,133,255,.30), rgba(0,0,0,0) 55%); } /* ---- App · Light (explicit, same as default) ----------------------------- */ html[data-theme="light"] { --ds-bg: #FFFFFF; --ds-surface: #EDEBE9; --ds-surface-2: #F6F5F4; --ds-surface-3: #FCFCFC; --ds-text: #111717; --ds-text-2: #363636; --ds-text-muted:#A7A7A7; --ds-border: #E2DFDB; --ds-btn-primary-bg: #161212; --ds-btn-primary-fg: #FFFFFF; --ds-btn-secondary-bg: #E5E0DA; --ds-btn-secondary-fg: #161213; --ds-hero-glow: none; } /* ---- Marketing (warm, editorial, lavender wash) -------------------------- */ html[data-theme="marketing"] { --ds-bg: #FCFCFC; --ds-surface: #F4F1FB; --ds-surface-2: #FFFFFF; --ds-surface-3: #EFE8FF; --ds-text: #161213; --ds-text-2: rgba(22,22,19,.75); --ds-text-muted:rgba(22,22,19,.55); --ds-border: #E7E2F2; --ds-btn-primary-bg: #161212; --ds-btn-primary-fg: #FFFFFF; --ds-btn-secondary-bg: #E5E0DA; --ds-btn-secondary-fg: #161213; --ds-shadow-card: var(--ds-shadow-soft); --ds-hero-glow: radial-gradient(120% 120% at 50% 0%, var(--ds-surface-3) 0%, var(--ds-bg) 70%), radial-gradient(circle at 100% 50%, rgba(159,133,255,.45), rgba(0,0,0,0) 60%); } /* ============================================================================= Base elements (opt-in: only affects pages that use the system globally) ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body.ds { margin: 0; background: var(--ds-bg); color: var(--ds-text); font: var(--ds-text-body)/1.6 var(--ds-font-ui); -webkit-font-smoothing: antialiased; transition: background var(--ds-transition), color var(--ds-transition); } .ds a { color: var(--ds-interactive); text-underline-offset: 2px; } .ds-display { font-family: var(--ds-font-display); font-weight: 600; line-height: 1.1; } .ds h1, .ds-h1 { font-family: var(--ds-font-display); font-weight: 600; font-size: var(--ds-text-h1); margin: 0 0 var(--ds-space-3); } .ds h2, .ds-h2 { font-family: var(--ds-font-display); font-weight: 500; font-size: var(--ds-text-h2); margin: var(--ds-space-6) 0 var(--ds-space-2); } .ds h3, .ds-h3 { font-weight: 700; font-size: var(--ds-text-h3); margin: var(--ds-space-4) 0 var(--ds-space-2); } .ds-hero-title { font-family: var(--ds-font-display); font-weight: 600; font-size: var(--ds-text-hero); line-height: 1.04; margin: 0 0 var(--ds-space-2); } .ds-muted { color: var(--ds-text-muted); } .ds-lead { color: var(--ds-text-2); } /* ============================================================================= Components ========================================================================== */ /* buttons fully rounded pills */ .ds-btn { font: 600 15px var(--ds-font-ui); border: 0; cursor: pointer; border-radius: var(--ds-radius-pill); padding: 14px 26px; transition: transform var(--ds-transition), filter var(--ds-transition), background var(--ds-transition); } .ds-btn:hover { transform: translateY(-1px); } .ds-btn:active { transform: translateY(0); } .ds-btn-primary { background: var(--ds-btn-primary-bg); color: var(--ds-btn-primary-fg); } .ds-btn-secondary { background: var(--ds-btn-secondary-bg); color: var(--ds-btn-secondary-fg); } .ds-btn-accent { background: var(--ds-accent); color: #161213; } .ds-btn-accent:hover { background: var(--ds-lavender-strong); } .ds-btn-ghost { background: transparent; color: var(--ds-interactive); border: 1.5px solid var(--ds-text); } /* cards / panels */ .ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-card); padding: var(--ds-space-5); box-shadow: var(--ds-shadow-card); } .ds-card-flat { box-shadow: none; } /* inputs */ .ds-input { width: 100%; background: var(--ds-surface-2); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-pill); padding: 12px 16px; font: var(--ds-text-body) var(--ds-font-ui); outline: none; } .ds-input:focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-lavender-tint); } /* pills & category chips */ .ds-pill { display: inline-block; background: var(--ds-surface-3); color: var(--ds-text-2); border-radius: var(--ds-radius-pill); padding: 4px 12px; font-size: var(--ds-text-small); font-weight: 600; } .ds-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ds-radius-pill); padding: 6px 12px; font-size: var(--ds-text-small); font-weight: 600; color: #161213; } .ds-chip-lime { background: var(--ds-cat-lime); } .ds-chip-sage { background: var(--ds-cat-sage); } .ds-chip-sky { background: var(--ds-cat-sky); } .ds-chip-coral { background: var(--ds-cat-coral); color: #fff; } .ds-chip-lavender { background: var(--ds-cat-lavender); } .ds-chip-periwinkle { background: var(--ds-cat-periwinkle); } /* priority chips */ .ds-prio { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; font-size: var(--ds-text-small); padding: 8px 14px; border-radius: var(--ds-radius-pill); } .ds-prio-high { background: var(--ds-prio-high); } .ds-prio-medium { background: var(--ds-prio-medium); } .ds-prio-low { background: var(--ds-surface-3); color: var(--ds-text); } /* planner task card (avatar + title + meta + checkbox) */ .ds-task { display: flex; align-items: center; gap: 12px; background: var(--ds-surface-2); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); padding: 12px 14px; } .ds-task .ds-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; } .ds-task .ds-task-body { flex: 1; min-width: 0; } .ds-task .ds-task-body b { font-weight: 600; } .ds-task .ds-task-body span { display: block; color: var(--ds-text-muted); font-size: var(--ds-text-small); } .ds-task .ds-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ds-text-muted); flex: 0 0 auto; } /* time-block header (top-rounded, tinted) */ .ds-blockhead { font-weight: 600; font-size: var(--ds-text-small); letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px; color: #161213; border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0; } /* layout + depth helpers */ .ds-wrap { max-width: var(--ds-maxw); margin: 0 auto; padding: var(--ds-space-6) var(--ds-space-5); } .ds-hero { background: var(--ds-hero-glow); } .ds-glow-soft { box-shadow: var(--ds-shadow-soft); } .ds-glow-warm { box-shadow: var(--ds-shadow-warm); } .ds-grain { position: relative; } .ds-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay; background-image: var(--ds-grain); } /* range / scrollbar accent for consistency */ .ds input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: var(--ds-surface-3); border-radius: 2px; } .ds input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ds-accent); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }