:root { /* ============================================================ WOPPADOODLE — DARK IS THE DEFAULT THEME Every value derived from the logo purple #D86ECC in OKLCH. Ratios verified; see BRAND.md §11. ============================================================ */ /* ---- surfaces (darkest to lightest) ---- */ --wf-page: #170315; /* the page itself */ --wf-surface: #301B2D; /* cards, panels */ --wf-elevated: #3C2739; /* modals, hovered cards */ --wf-line: #4E394B; /* dividers, card borders */ --wf-line-strong: #776173; /* input borders, focus rings */ /* ---- text ---- */ --wf-text: #FFFFFF; /* headings (19.19:1 on page) */ --wf-body: #DFD3DD; /* body copy (13.25:1) */ --wf-muted: #A79AA4; /* captions, meta (7.13:1) */ /* ---- brand ---- */ --wf-purple: #D86ECC; /* THE brand colour. Buttons, accents, links. */ --wf-purple-ink: #2E172B; /* the text colour that goes ON the purple */ --wf-purple-soft: #FBA2EF; /* purple as text on dark (9.03:1 on card) */ --wf-amber: #FFB627; /* small accents only: eyebrow, marker, one icon */ --wf-teal: #22E0E5; /* small accents only: one icon, info */ /* ---- semantic (dark-tuned) ---- */ --wf-success: #4ADE80; --wf-warning: #FFB627; --wf-danger: #F87171; /* ---- type ---- */ --wf-font-display: 'Comfortaa', system-ui, sans-serif; --wf-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --wf-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- shape ---- */ --wf-radius-sm: 8px; --wf-radius: 14px; --wf-radius-lg: 22px; --wf-radius-pill: 999px; /* Depth on dark comes from surface lightness, not shadow. Cards are lighter than the page. Use these only for floating overlays. */ --wf-shadow: 0 10px 30px rgba(0,0,0,.45); --wf-shadow-lg: 0 24px 60px rgba(0,0,0,.55); } /* ============================================================ LIGHT THEME — for client demo pages that need a light surface. Not used on woppadoodle.com. Opt in with . ============================================================ */ [data-theme="light"] { --wf-page: #FFF7FE; --wf-surface: #FFFFFF; --wf-elevated: #FFFFFF; --wf-line: #E1CDDE; --wf-line-strong: #9D8C9A; --wf-text: #2E172B; --wf-body: #635060; --wf-muted: #7B6C79; --wf-purple: #B345A9; /* deeper: light bg needs white text to work */ --wf-purple-ink: #FFFFFF; --wf-purple-soft: #96308D; --wf-amber: #FFB627; --wf-teal: #028083; --wf-success: #157E3C; --wf-warning: #D38F08; --wf-danger: #BE2F2C; --wf-shadow: 0 4px 12px rgba(46,23,43,.07), 0 2px 4px rgba(46,23,43,.05); --wf-shadow-lg: 0 18px 40px rgba(46,23,43,.10), 0 4px 12px rgba(46,23,43,.06); } /* Full ramps, for in-between steps. Hue-consistent with the brand. */ :root { --wf-purple-50: #FFF2FD; --wf-purple-100: #FFE3FA; --wf-purple-200: #FFC8F6; --wf-purple-300: #FBA2EF; --wf-purple-400: #E881DB; --wf-purple-500: #D86ECC; --wf-purple-600: #B345A9; --wf-purple-700: #96308D; --wf-purple-800: #77216F; --wf-purple-900: #53164E; --wf-amber-50: #FFF5E7; --wf-amber-100: #FFEAC9; --wf-amber-200: #FFD594; --wf-amber-300: #FFB627; --wf-amber-400: #E19E0C; --wf-amber-500: #CC8F02; --wf-amber-600: #9F6E02; --wf-amber-700: #815903; --wf-amber-800: #654502; --wf-amber-900: #472F00; --wf-teal-50: #DDFFFF; --wf-teal-100: #BBFBFC; --wf-teal-200: #86F1F4; --wf-teal-300: #22E0E5; --wf-teal-400: #0DC4C9; --wf-teal-500: #0EB2B6; --wf-teal-600: #028083; --wf-teal-700: #067073; --wf-teal-800: #035759; --wf-teal-900: #013C3E; --wf-neutral-50: #F8F6F8; --wf-neutral-100: #EFEBEE; --wf-neutral-200: #E0DADF; --wf-neutral-300: #CBC3C9; --wf-neutral-400: #B2A9B0; --wf-neutral-500: #A299A0; --wf-neutral-600: #7F767D; --wf-neutral-700: #675F66; --wf-neutral-800: #50494F; --wf-neutral-900: #373236; }