/* ============================================================================ uxjo/wa — Design Tokens The single source of truth. Everything visual references a token here. Spectrum lifted from the brand icon: orange pills, coral arrows, sky triangles — expanded into a monday-style multi-hue system, anchored on ink. ============================================================================ */ :root { /* ---------- BRAND SPECTRUM ------------------------------------------------ Each hue ships soft / base / deep. Base is the "block" color you see on the canvas; soft is the 8% tint surface; deep is the pressed/active state. */ /* Spark Coral — the logo asterisk. Brand accent + energy. */ --coral-soft: #FFE7E6; --coral: #FF7D7A; --coral-deep: #C62F2B; /* was #F2514D: 2.94:1 as text on --coral-soft */ --coral-text: #C62F2B; /* alias, kept so existing call sites resolve */ /* Tangerine — the icon's status pills. Primary "go" / highlight. */ --tangerine-soft: #FFEAD5; --tangerine: #FF9F45; --tangerine-deep: #9E5100; /* was #ED7A12: 2.43:1 as text on --tangerine-soft */ /* Sun — warmth, attention, "new". */ --sun-soft: #FFF3CC; --sun: #FFC83D; --sun-deep: #8A6300; /* prose. Was #E0A200: 2.03:1, the worst on the page */ --sun-star: #FBBC04; /* rating GLYPHS. Stars are graphical and gold by convention, so they keep the bright value and the numeral beside them carries the readable one. */ /* Grass — success + the WhatsApp channel signal (#25D366 lives here). */ --grass-soft: #DCF8E6; --grass: #25D366; /* WhatsApp green — channel only */ --grass-deep: #0E7540; /* was #128C4B: 3.82:1 as text on --grass-soft */ /* Sky — the icon's play triangles. Links, info, motion. */ --sky-soft: #D8F0FF; --sky: #1FB6FF; --sky-deep: #0A6FA8; /* was #0A82C4: 4.20:1 as link text on white */ /* Violet — AI / agent intelligence moments. */ --violet-soft: #ECE4FF; --violet: #8B5CF6; --violet-deep: #6D28D9; /* Indigo — deep-tech, model / data plane. */ --indigo-soft: #E4E6FF; --indigo: #5B5BF0; --indigo-deep: #3A36C9; /* ---------- INK + NEUTRALS ------------------------------------------------ */ --ink: #101012; /* product panels, the icon's canvas */ --ink-700: #1C1C20; --ink-600: #2A2A30; --ink-500: #3A3A42; --neutral-0: #ffffff; --neutral-50: #f7f9fa; --neutral-100: #eef2f4; --neutral-200: #e2e8ec; --neutral-300: #cdd6dc; --neutral-400: #9aa7b0; --neutral-500: #6b7882; --neutral-600: #4a555e; --neutral-700: #333b42; --neutral-800: #20262b; --neutral-900: #11161a; /* ---------- SEMANTIC ROLES ------------------------------------------------ */ --bg-canvas: #F4F7F9; /* cool off-white marketing surface */ --bg-surface: #ffffff; --bg-subtle: var(--neutral-50); --bg-ink: var(--ink); /* the dark "product" surface */ --fg-1: #14181B; /* headings on light */ --fg-2: #3C464E; /* body on light */ /* The muted ramp was tuned by eye and failed AA once it started carrying real content: --fg-3 was 4.21:1 on canvas, --fg-4 only 2.46:1 while doing duty on every mono label and eyebrow. Re-cut so all three steps pass and stay visibly distinct: 8.96 / 6.58 / 4.86 on --bg-canvas. */ --fg-3: #4E5A64; /* muted */ --fg-4: #626E78; /* labels, metadata, on --bg-canvas or --bg-surface */ --fg-4-raised: #626E78; /* same ramp step, but for text on --bg-subtle */ --fg-on-ink-1: #FFFFFF; --fg-on-ink-2: #B9C2C9; --fg-on-ink-3: #7E8A92; --border-1: #E7EDF0; --border-2: #D9E1E6; --border-3: #C2CCD3; --border-ink: rgba(255,255,255,0.10); --action: var(--ink); /* primary button = ink (icon DNA) */ --action-hover: var(--ink-700); --accent: var(--coral); --link: var(--sky-deep); --success: var(--grass-deep); --warning: var(--sun-deep); --danger: var(--coral-deep); /* ---------- TYPOGRAPHY ---------------------------------------------------- Figtree — geometric-rounded, warm, monday-adjacent. Mono for tokens. */ --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Fluid display scale */ --fs-mega: clamp(3.25rem, 1.5rem + 7vw, 7rem); /* hero */ --fs-7xl: clamp(2.75rem, 1.6rem + 4.6vw, 5rem); --fs-6xl: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); --fs-5xl: clamp(2rem, 1.5rem + 2vw, 3rem); --fs-4xl: 2.25rem; --fs-3xl: 1.75rem; --fs-2xl: 1.375rem; --fs-xl: 1.1875rem; --fs-lg: 1.0625rem; --fs-base: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --fs-2xs: 0.6875rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-extra: 800; --fw-black: 900; --lh-tight: 1.02; --lh-snug: 1.15; --lh-head: 1.08; --lh-body: 1.6; --track-mega: -0.02em; --track-head: -0.012em; --track-tight: -0.01em; --track-label: 0.14em; /* uppercase eyebrows */ /* ---------- SPACING (4px base) -------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; --s-40: 10rem; --gutter: clamp(1.25rem, 5vw, 5rem); --maxw: 1200px; /* ---------- RADIUS -------------------------------------------------------- Generous + rounded — block language is soft-cornered, pills are full. */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 32px; --r-3xl: 44px; --r-pill:9999px; /* ---------- SHADOWS -------------------------------------------------------- Soft, colored-neutral, NYC-clean. Plus a "lift" for blocks. */ --sh-xs: 0 1px 2px rgba(16,16,18,0.06); --sh-sm: 0 2px 6px rgba(16,16,18,0.07); --sh-md: 0 8px 22px -6px rgba(16,16,18,0.14); --sh-lg: 0 22px 48px -16px rgba(16,16,18,0.22); --sh-xl: 0 40px 80px -28px rgba(16,16,18,0.30); --sh-block: 0 14px 0 -6px rgba(16,16,18,0.04), 0 18px 40px -18px rgba(16,16,18,0.28); /* ---------- MOTION --------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot for blocks */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 140ms; --t-base: 220ms; --t-slow: 420ms; } /* ================================================================ * DARK THEME — token overrides (set ) * ================================================================ */ :root[data-theme="dark"]{ color-scheme: dark; --bg-canvas:#0E1116; --bg-surface:#171B22; --bg-subtle:#1E232B; --fg-1:#F2F5F8; --fg-2:#C4CDD5; --fg-3:#8B95A0; --fg-4:#7C8894; /* was #5C6670: 3.24:1 on the dark canvas */ --fg-4-raised:#98A4AD; /* #7C8894 is 4.36:1 on --bg-subtle, under AA */ --border-1:#262C35; --border-2:#313842; --border-3:#3D4550; --neutral-50:#1C2128; --neutral-100:#222831; --neutral-200:#2C333D; --neutral-300:#3D4550; } :root[data-theme="dark"] body{ background:var(--bg-canvas); color:var(--fg-2); } :root[data-theme="dark"] .btn-primary{ background:#F2F5F8; color:#101012; } :root[data-theme="dark"] .btn-primary:hover{ background:#fff; } :root[data-theme="dark"] .btn-ghost{ color:var(--fg-1); } :root[data-theme="dark"] .h-nav,:root[data-theme="dark"] .subhead,:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .nav{ background:rgba(14,17,22,.82); } :root[data-theme="dark"] .trusted .row span,:root[data-theme="dark"] .hero-logos span{ color:var(--fg-3); } :root[data-theme="dark"] .h-brand img,:root[data-theme="dark"] .nav-logo img,:root[data-theme="dark"] .sidebar-head img,:root[data-theme="dark"] .subhead .logo img{ filter:brightness(0) invert(1); } /* tinted-surface dark fix: keep dark text on light tint surfaces */ :root[data-theme="dark"] .conv.active .nm,:root[data-theme="dark"] .conv.active .snip,:root[data-theme="dark"] .conv.active .tm,:root[data-theme="dark"] .story.tint,:root[data-theme="dark"] .story.tint .stat,:root[data-theme="dark"] .story.tint .statlbl,:root[data-theme="dark"] .story.tint .read,:root[data-theme="dark"] .pt-card h2,:root[data-theme="dark"] .pt-card p,:root[data-theme="dark"] .pt-card .sec-eyebrow,:root[data-theme="dark"] .bw-c.on .n,:root[data-theme="dark"] .bw-c.on .s,:root[data-theme="dark"] .fb-field.selected label,:root[data-theme="dark"] .fb-field.selected .fc-label,:root[data-theme="dark"] .onboard-band h3,:root[data-theme="dark"] .onboard-band p,:root[data-theme="dark"] .voice .col,:root[data-theme="dark"] .voice h4,:root[data-theme="dark"] .voice li{ color:#14181B; } :root{ /* WhatsApp chat wallpaper: the doodle tile over WhatsApp’s own base colour. One definition, used by every thread mockup on the site. */ --wa-bg:#0B141A; --wa-paper:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%238697A0%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.13%22%3E%3Cg%20transform%3D%22translate(18%2026)%20rotate(-12)%20scale(1.05)%22%3E%3Cpath%20d%3D%22M4%208h12v7H4z%20M4%208l6%204%206-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(92%2014)%20rotate(9)%20scale(0.8)%22%3E%3Cpath%20d%3D%22M6%204h8v12l-4-3-4%203z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(168%2034)%20rotate(17)%20scale(0.95)%22%3E%3Cpath%20d%3D%22M10%203l2.2%204.6%205%20.7-3.6%203.5.9%205-4.5-2.4-4.5%202.4.9-5L2.8%208.3l5-.7z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(214%2096)%20rotate(-8)%20scale(0.85)%22%3E%3Cpath%20d%3D%22M3%205h14v9H8l-3%203v-3H3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(150%20104)%20rotate(6)%20scale(1.1)%22%3E%3Cpath%20d%3D%22M10%2017s-6-4.3-6-8.3A3.7%203.7%200%200%201%2010%206a3.7%203.7%200%200%201%206%202.7c0%204-6%208.3-6%208.3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(74%2092)%20rotate(-16)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M5%2010a5%205%200%200%201%2010%200v4H5z%20M7%2014v2%20M13%2014v2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(16%20124)%20rotate(12)%20scale(0.95)%22%3E%3Cpath%20d%3D%22M10%202v16%20M2%2010h16%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(112%20176)%20rotate(-6)%20scale(1)%22%3E%3Cpath%20d%3D%22M4%2014l4-5%203%203%205-6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(186%20182)%20rotate(14)%20scale(0.85)%22%3E%3Cpath%20d%3D%22M6%203h8v14H6z%20M8%205h4%20M8%2015h4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(42%20196)%20rotate(4)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M10%204a6%206%200%201%200%200%2012%206%206%200%200%200%200-12z%20M10%207v3l2%202%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(228%20148)%20rotate(-11)%20scale(0.8)%22%3E%3Cpath%20d%3D%22M3%206l7%205%207-5%20M3%206h14v8H3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(96%2060)%20rotate(20)%20scale(0.75)%22%3E%3Cpath%20d%3D%22M8%203h4v5h4l-6%209-6-9h4z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --grid-line: rgba(20,24,27,.05); } :root[data-theme="dark"]{ --grid-line: rgba(255,255,255,.045); } :root[data-theme="dark"] .pt-card .btn-ghost{ color:#101012; } :root[data-theme="dark"] .chart .col .bar{ background:#5b6672; } :root[data-theme="dark"] .chart .col .bar.alt{ background:var(--sky); } /* ============================================================================ MARKETING LAYER — uxjo 2.0 site only. Extends the product token set above; nothing here overrides a product token, so app surfaces are unaffected. ============================================================================ */ :root{ /* WhatsApp chat wallpaper: the doodle tile over WhatsApp’s own base colour. One definition, used by every thread mockup on the site. */ --wa-bg:#0B141A; --wa-paper:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%238697A0%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.13%22%3E%3Cg%20transform%3D%22translate(18%2026)%20rotate(-12)%20scale(1.05)%22%3E%3Cpath%20d%3D%22M4%208h12v7H4z%20M4%208l6%204%206-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(92%2014)%20rotate(9)%20scale(0.8)%22%3E%3Cpath%20d%3D%22M6%204h8v12l-4-3-4%203z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(168%2034)%20rotate(17)%20scale(0.95)%22%3E%3Cpath%20d%3D%22M10%203l2.2%204.6%205%20.7-3.6%203.5.9%205-4.5-2.4-4.5%202.4.9-5L2.8%208.3l5-.7z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(214%2096)%20rotate(-8)%20scale(0.85)%22%3E%3Cpath%20d%3D%22M3%205h14v9H8l-3%203v-3H3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(150%20104)%20rotate(6)%20scale(1.1)%22%3E%3Cpath%20d%3D%22M10%2017s-6-4.3-6-8.3A3.7%203.7%200%200%201%2010%206a3.7%203.7%200%200%201%206%202.7c0%204-6%208.3-6%208.3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(74%2092)%20rotate(-16)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M5%2010a5%205%200%200%201%2010%200v4H5z%20M7%2014v2%20M13%2014v2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(16%20124)%20rotate(12)%20scale(0.95)%22%3E%3Cpath%20d%3D%22M10%202v16%20M2%2010h16%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(112%20176)%20rotate(-6)%20scale(1)%22%3E%3Cpath%20d%3D%22M4%2014l4-5%203%203%205-6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(186%20182)%20rotate(14)%20scale(0.85)%22%3E%3Cpath%20d%3D%22M6%203h8v14H6z%20M8%205h4%20M8%2015h4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(42%20196)%20rotate(4)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M10%204a6%206%200%201%200%200%2012%206%206%200%200%200%200-12z%20M10%207v3l2%202%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(228%20148)%20rotate(-11)%20scale(0.8)%22%3E%3Cpath%20d%3D%22M3%206l7%205%207-5%20M3%206h14v8H3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(96%2060)%20rotate(20)%20scale(0.75)%22%3E%3Cpath%20d%3D%22M8%203h4v5h4l-6%209-6-9h4z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* Dark "chapter" sections. Kept distinct from --bg-canvas in BOTH themes so an ink section never collapses into the page background. */ --sec-ink:#101012; --sec-ink-2:#17171B; --sec-ink-line:rgba(255,255,255,.09); --on-ink-1:#FFFFFF; --on-ink-2:#B9C2C9; --on-ink-3:#78838C; /* Channel identity — the platforms' own brand colours, so a channel is recognisable at a glance. Everything else on the page stays on the uxjo spectrum; these are used only on channel marks and their tint chips. */ --ch-wa:#25D366; --ch-wa-soft:#DCF8E6; --ch-wa-deep:#0E7540; /* was #128C4B: 3.82:1 on its tint */ --ch-ig:#D62976; --ch-ig-grad:linear-gradient(135deg,#F77737 0%,#E1306C 48%,#C13584 100%); --ch-ig-soft:#FDEBF3; --ch-ig-deep:#8A1F5C; /* was #C13584: 4.34:1 on its tint */ --ch-fb:#1877F2; --ch-fb-soft:#E7F0FE; --ch-fb-deep:#0C5DD1; --ch-gb:#4285F4; --ch-gb-soft:#E8F0FE; --ch-gb-deep:#1660CC; /* was #1A73E8: 3.93:1 on its tint */ --ch-yt:#FF0000; --ch-yt-soft:#FFE8E8; --ch-yt-deep:#CC0000; --ch-em:#5B5BF0; --ch-em-soft:#E4E6FF; --ch-em-deep:#3A36C9; /* Layout rhythm — mobile-first, scales up */ --wrap:1240px; --wrap-tight:1040px; --gut:1.25rem; --sec-y:4.5rem; --sec-y-lg:7.5rem; /* 3D stage */ --persp:1400px; --persp-near:900px; --tilt:0deg; --pan-x:0; --pan-y:0; } @media (min-width:768px){ :root{ /* WhatsApp chat wallpaper: the doodle tile over WhatsApp’s own base colour. One definition, used by every thread mockup on the site. */ --wa-bg:#0B141A; --wa-paper:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%238697A0%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.13%22%3E%3Cg%20transform%3D%22translate(18%2026)%20rotate(-12)%20scale(1.05)%22%3E%3Cpath%20d%3D%22M4%208h12v7H4z%20M4%208l6%204%206-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(92%2014)%20rotate(9)%20scale(0.8)%22%3E%3Cpath%20d%3D%22M6%204h8v12l-4-3-4%203z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(168%2034)%20rotate(17)%20scale(0.95)%22%3E%3Cpath%20d%3D%22M10%203l2.2%204.6%205%20.7-3.6%203.5.9%205-4.5-2.4-4.5%202.4.9-5L2.8%208.3l5-.7z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(214%2096)%20rotate(-8)%20scale(0.85)%22%3E%3Cpath%20d%3D%22M3%205h14v9H8l-3%203v-3H3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(150%20104)%20rotate(6)%20scale(1.1)%22%3E%3Cpath%20d%3D%22M10%2017s-6-4.3-6-8.3A3.7%203.7%200%200%201%2010%206a3.7%203.7%200%200%201%206%202.7c0%204-6%208.3-6%208.3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(74%2092)%20rotate(-16)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M5%2010a5%205%200%200%201%2010%200v4H5z%20M7%2014v2%20M13%2014v2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(16%20124)%20rotate(12)%20scale(0.95)%22%3E%3Cpath%20d%3D%22M10%202v16%20M2%2010h16%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(112%20176)%20rotate(-6)%20scale(1)%22%3E%3Cpath%20d%3D%22M4%2014l4-5%203%203%205-6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(186%20182)%20rotate(14)%20scale(0.85)%22%3E%3Cpath%20d%3D%22M6%203h8v14H6z%20M8%205h4%20M8%2015h4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(42%20196)%20rotate(4)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M10%204a6%206%200%201%200%200%2012%206%206%200%200%200%200-12z%20M10%207v3l2%202%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(228%20148)%20rotate(-11)%20scale(0.8)%22%3E%3Cpath%20d%3D%22M3%206l7%205%207-5%20M3%206h14v8H3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(96%2060)%20rotate(20)%20scale(0.75)%22%3E%3Cpath%20d%3D%22M8%203h4v5h4l-6%209-6-9h4z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --gut:2rem; --sec-y:6rem; } } @media (min-width:1100px){ :root{ /* WhatsApp chat wallpaper: the doodle tile over WhatsApp’s own base colour. One definition, used by every thread mockup on the site. */ --wa-bg:#0B141A; --wa-paper:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%238697A0%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.13%22%3E%3Cg%20transform%3D%22translate(18%2026)%20rotate(-12)%20scale(1.05)%22%3E%3Cpath%20d%3D%22M4%208h12v7H4z%20M4%208l6%204%206-4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(92%2014)%20rotate(9)%20scale(0.8)%22%3E%3Cpath%20d%3D%22M6%204h8v12l-4-3-4%203z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(168%2034)%20rotate(17)%20scale(0.95)%22%3E%3Cpath%20d%3D%22M10%203l2.2%204.6%205%20.7-3.6%203.5.9%205-4.5-2.4-4.5%202.4.9-5L2.8%208.3l5-.7z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(214%2096)%20rotate(-8)%20scale(0.85)%22%3E%3Cpath%20d%3D%22M3%205h14v9H8l-3%203v-3H3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(150%20104)%20rotate(6)%20scale(1.1)%22%3E%3Cpath%20d%3D%22M10%2017s-6-4.3-6-8.3A3.7%203.7%200%200%201%2010%206a3.7%203.7%200%200%201%206%202.7c0%204-6%208.3-6%208.3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(74%2092)%20rotate(-16)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M5%2010a5%205%200%200%201%2010%200v4H5z%20M7%2014v2%20M13%2014v2%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(16%20124)%20rotate(12)%20scale(0.95)%22%3E%3Cpath%20d%3D%22M10%202v16%20M2%2010h16%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(112%20176)%20rotate(-6)%20scale(1)%22%3E%3Cpath%20d%3D%22M4%2014l4-5%203%203%205-6%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(186%20182)%20rotate(14)%20scale(0.85)%22%3E%3Cpath%20d%3D%22M6%203h8v14H6z%20M8%205h4%20M8%2015h4%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(42%20196)%20rotate(4)%20scale(0.9)%22%3E%3Cpath%20d%3D%22M10%204a6%206%200%201%200%200%2012%206%206%200%200%200%200-12z%20M10%207v3l2%202%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(228%20148)%20rotate(-11)%20scale(0.8)%22%3E%3Cpath%20d%3D%22M3%206l7%205%207-5%20M3%206h14v8H3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(96%2060)%20rotate(20)%20scale(0.75)%22%3E%3Cpath%20d%3D%22M8%203h4v5h4l-6%209-6-9h4z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --gut:2.5rem; --sec-y:var(--sec-y-lg); } } :root[data-theme="dark"]{ --sec-ink:#05070A; --sec-ink-2:#0C1015; --sec-ink-line:rgba(255,255,255,.08); --sh-md:0 8px 22px -6px rgba(0,0,0,.6); --sh-lg:0 22px 48px -16px rgba(0,0,0,.7); --sh-xl:0 40px 80px -28px rgba(0,0,0,.8); --sh-sm:0 2px 6px rgba(0,0,0,.5); --sh-xs:0 1px 2px rgba(0,0,0,.4); } /* a11y focus — visible keyboard focus everywhere */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 6px; } .dd-opt:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; } .ri:focus-visible, .mnav-i:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } .skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: .5rem 1rem; border-radius: 8px; z-index: 999; font-weight: 600; } .skip-link:focus { left: 8px; } /* ============================================================================ DARK THEME, HUE CORRECTION. The spectrum's -soft tints and -deep values are tuned for a light canvas: a soft tint is a pale wash and a deep value is dark text on it. On ink both invert, so a tinted chip became light-on-light and every -deep label fell under 3:1. Flip the pair at the token, once, rather than per component. ========================================================================== */ :root[data-theme="dark"]{ --coral-soft:rgba(255,125,122,.18); --coral-deep:#FFA9A6; --coral-text:#FFA9A6; --tangerine-soft:rgba(255,159,69,.18); --tangerine-deep:#FFC48A; --sun-soft:rgba(255,200,61,.18); --sun-deep:#FFD97A; --grass-soft:rgba(37,211,102,.18); --grass-deep:#6EE7A0; --sky-soft:rgba(31,182,255,.18); --sky-deep:#7FD3FF; --violet-soft:rgba(139,92,246,.22); --violet-deep:#C9B8FF; --indigo-soft:rgba(91,91,240,.22); --indigo-deep:#AFB0FF; --ch-wa-soft:rgba(37,211,102,.18); --ch-wa-deep:#6EE7A0; --ch-ig-soft:rgba(228,64,95,.18); --ch-ig-deep:#FFA3B8; --ch-fb-soft:rgba(24,119,242,.18); --ch-fb-deep:#96C6FF; --ch-gb-soft:rgba(66,133,244,.18); --ch-gb-deep:#A3C5FF; --ch-yt-soft:rgba(255,0,0,.18); --ch-yt-deep:#FF9E9E; --ch-em-soft:rgba(91,91,240,.22); --ch-em-deep:#AFB0FF; --link:#7FD3FF; --sun-star:#FFC83D; /* rating glyphs stay gold on either canvas */ } /* a solid hue fill now reads light, so its label has to be ink */ :root[data-theme="dark"] .badge-pop{color:#101012} /* these two are ink-filled buttons: in dark they invert whole, not just text */ :root[data-theme="dark"] .cmp .go, :root[data-theme="dark"] .draft .acts .ok{background:#F2F5F8;color:#101012} /* .on-ink is a light-on-dark band: inside a dark theme it is the same surface as the page, so its inverted button rules were painting ink on ink */ :root[data-theme="dark"] .on-ink .btn-primary, :root[data-theme="dark"] .cta-band .btn-primary{background:#F2F5F8;color:#101012} :root[data-theme="dark"] .on-ink .btn-ghost, :root[data-theme="dark"] .cta-band .btn-ghost{color:#F2F5F8;border-color:rgba(255,255,255,.28)} :root[data-theme="dark"] .btn-wa{background:#0E7540;color:#fff} /* Components that sit on a tinted surface hardcoded ink text, because before the dark hue correction that surface was always a pale wash. Now the tint is dark, so the text has to come with it. */ :root[data-theme="dark"] .band h2, :root[data-theme="dark"] .band p, :root[data-theme="dark"] .band .btn-ghost{color:#F2F5F8} :root[data-theme="dark"] .band .btn-ghost{border-color:rgba(255,255,255,.28)} :root[data-theme="dark"] .band .btn-ghost:hover{border-color:#F2F5F8} :root[data-theme="dark"] .js-spine button.on{color:#F2F5F8} :root[data-theme="dark"] .htab{color:#C4CDD5} :root[data-theme="dark"] .htab[aria-selected="true"]{color:#F2F5F8} :root[data-theme="dark"] .js-spine button{color:#C4CDD5} :root[data-theme="dark"] .tag-line{color:var(--cd)} /* .js-co is a white product bubble on the dark stage: it stays light, so its ink text is correct and must not be flipped */ :root[data-theme="dark"] .js-co{background:#fff} /* ============================================================================ THEME-LOCKED ISLANDS. Some mocks reproduce third-party UI that is white on both themes: a WhatsApp template bubble, a Google result, an Instagram post, an order card. Those containers keep --neutral-0 in dark mode, but their descendants inherited the flipped tokens, so text went light on white. Re-declare the light values on the island itself and every child resolves correctly, instead of patching each one and leaking again on the next mock. ========================================================================== */ :root[data-theme="dark"] .tpl-bub, :root[data-theme="dark"] .js-co, :root[data-theme="dark"] .miniapp, :root[data-theme="dark"] .lcard, :root[data-theme="dark"] .pst, :root[data-theme="dark"] .gpst, :root[data-theme="dark"] .fbp, :root[data-theme="dark"] .gs-bar, :root[data-theme="dark"] .gs-res, /* an app tile is a logo plate: the marks inside carry fixed brand hex authored for a light background, so a near-black one (Notion) disappears when the surface flips. Same case as the third-party mocks above. */ :root[data-theme="dark"] .cf-apps .cf-tile, :root[data-theme="dark"] .cf-apps .cf-hub, :root[data-theme="dark"] [data-mock-light]{ --fg-1:#14181B; --fg-2:#3C464E; --fg-3:#4E5A64; --fg-4:#626E78; --bg-surface:#ffffff; --bg-subtle:#f7f9fa; --bg-canvas:#F4F7F9; --border-1:#E7EDF0; --border-2:#D9E1E6; --border-3:#C2CCD3; --neutral-50:#f7f9fa; --neutral-100:#eef2f4; --neutral-200:#e2e8ec; --neutral-300:#cdd6dc; --coral-soft:#FFE7E6; --coral-deep:#C62F2B; --coral-text:#C62F2B; --tangerine-soft:#FFEAD5; --tangerine-deep:#9E5100; --sun-soft:#FFF3CC; --sun-deep:#8A6300; --grass-soft:#DCF8E6; --grass-deep:#0E7540; --sky-soft:#D8F0FF; --sky-deep:#0A6FA8; --violet-soft:#ECE4FF; --violet-deep:#6D28D9; --indigo-soft:#E4E6FF; --indigo-deep:#3A36C9; --ch-wa-soft:#DCF8E6; --ch-wa-deep:#0E7540; --ch-ig-soft:#FDEBF3; --ch-ig-deep:#8A1F5C; --ch-fb-soft:#E7F0FE; --ch-fb-deep:#1660CC; --ch-gb-soft:#E8F0FE; --ch-gb-deep:#1660CC; --link:#0A6FA8; color:#3C464E; /* the island has to paint its own surface too: re-declaring the tokens fixed the text but left it sitting on the dark card behind it */ background:#ffffff; } :root[data-theme="dark"] .gs-bar{background:#f7f9fa} :root[data-theme="dark"] .pst-h,:root[data-theme="dark"] .pst-b, :root[data-theme="dark"] .ig-acts,:root[data-theme="dark"] .fb-bar{background:#ffffff} /* the fill decides the label: a light hue takes ink, a dark neutral takes light */ /* these three sat just under the floor on ink */ :root[data-theme="dark"] .hook .to, :root[data-theme="dark"] .pan-bar .url, :root[data-theme="dark"] .an-foot{color:#A6B2BB} /* --violet-soft is a background tint that a few ink surfaces borrow as TEXT. The dark flip made it translucent, which is correct for a fill and unusable for a glyph, so those three uses get a solid light violet instead. */ :root[data-theme="dark"] .code .p, :root[data-theme="dark"] .section--ink .evt code, :root[data-theme="dark"] .appr .ttl, :root[data-theme="dark"] .jo-tag{color:#C9B8FF} /* Two single-element causes, fixed at the element rather than by locking the whole container to light. */ :root[data-theme="dark"] .status-pill[style*="neutral-300"], :root[data-theme="dark"] .status-pill[style*="neutral-200"]{color:#F2F5F8} :root[data-theme="dark"] .lprod .pay{color:#062B17} /* Outside the islands the -deep fills are light tints in dark mode, so a pill label goes ink; the one neutral-filled pill is the exception and goes light. */ :root[data-theme="dark"] .status-pill{color:#101012} .status-pill.neu{color:#20262B} :root[data-theme="dark"] .status-pill.neu, :root[data-theme="dark"] .status-pill[style*="neutral-300"], :root[data-theme="dark"] .status-pill[style*="neutral-200"]{color:#F2F5F8} /* the commerce node keeps its green tint, so its ink label has to lift */ :root[data-theme="dark"] .lprod b, :root[data-theme="dark"] .lprod .nm{color:#DCF8E6} /* The muted ramp is calibrated against --bg-canvas. .chain paints a raised surface (rgb(30,35,43)) that is lighter than the canvas, so --fg-4 drops from 5.23:1 there to 4.36:1. The surface re-declares its own step rather than the global token moving, which would collapse --fg-4 into --fg-3. */ :root[data-theme="dark"] .chain{--fg-4:#909BA7;--fg-3:#AAB4BE}