/* ============================================================ CAUSA — design tokens NOT invented. Transcribed from the shipping design system in causa-v2 (the Causa app): · palette src/lib/theme.tsx PALETTES.emerald · type src/lib/fonts.ts FONT · type scale src/lib/ui.tsx typeScale · radius src/lib/theme.tsx RADIUS / RADIUS_SM · mark src/lib/mark.tsx MARK Emerald is the brand palette. Obsidian and Gold exist in that codebase as in-app user preferences and never leave the running app - they are not brand colours and must not appear on the site. Anything below marked WEB is an addition for this site (space scale, fluid type, motion) and has no upstream counterpart. ============================================================ */ :root { /* ---------- Emerald · dark (the primary brand context) ---------- */ --e-dark-bg-grad-0: #0A0B09; --e-dark-bg-grad-1: #131611; --e-dark-bg: #0B0C0A; --e-dark-glass: rgba(233, 240, 225, 0.055); --e-dark-glass-brd: rgba(214, 232, 205, 0.10); --e-dark-fg: #EFF2EA; --e-dark-fg-muted: #8D998A; --e-dark-primary: #34D399; --e-dark-primary-fg: #04120C; --e-dark-grad-0: #34D399; /* accent gradient, as authored */ --e-dark-grad-1: #1FB894; --e-dark-gold: #E2B457; --e-dark-danger: #F0736E; --e-dark-muted: rgba(233, 240, 225, 0.07); /* ---------- Emerald · light ---------- */ --e-light-bg-grad-0: #F7F7F2; --e-light-bg-grad-1: #EDEFE6; --e-light-bg: #F6F6F1; --e-light-glass: rgba(255, 255, 255, 0.78); --e-light-glass-brd: rgba(28, 34, 22, 0.09); --e-light-fg: #171A13; --e-light-fg-muted: #5E6656; --e-light-primary: #0A7A54; --e-light-primary-fg: #FFFFFF; --e-light-grad-0: #0A7A54; --e-light-grad-1: #08715F; --e-light-gold: #644C07; --e-light-danger: #C4342E; --e-light-muted: rgba(28, 34, 22, 0.055); /* ---------- The mark's three struck inks ---------- Sampled off the accent ramp at t = i/(filled-1), exactly as export-mark-icons.mjs does it. Flats, not a gradient: a two-stop ramp bands at 48px and dithers in a store downscale. */ /* DEFAULTS ARE THE DARK RAMP. The semantic layer below re-declares them per ground - the struck ink flips with the accent and is not portable. */ --mark-struck-0: #1FB894; --mark-struck-1: #2AC697; --mark-struck-2: #34D399; /* open strokes = mutedForeground at 40% over the ground */ --mark-open-opacity: 0.4; /* that composite, pre-baked for the dark ground only */ --mark-open-on-dark: #3F443D; /* ---------- Type ---------- */ --font-display: 'Archivo', system-ui, sans-serif; /* 800 ExtraBold */ --font-strong: 'Archivo', system-ui, sans-serif; /* 700 */ --font-ui: 'Archivo', system-ui, sans-serif; /* 600 */ --font-caption: 'Archivo', system-ui, sans-serif; /* 500 */ --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* Upstream deliberately leaves body prose on the platform stack. On web that means a real system stack, not Archivo at 15px. */ --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Source scale, verbatim from ui.tsx typeScale (px / line-height / tracking). These are phone sizes; the WEB scale below preserves their proportions and their tracking character. */ --src-display: 36/44/-0.7; --src-title: 30/37/-0.2; --src-body: 15/21/0; --src-sub: 14/20/0; --src-label: 11/-/1.4; --src-caption: 11/15/0.7; --src-data: 15/-/tabular; /* WEB fluid scale */ --text-xs: 0.6875rem; /* 11 - label/caption */ --text-sm: 0.875rem; /* 14 - sub */ --text-base: 0.9375rem; /* 15 - body */ --text-lg: 1.0625rem; --text-xl: clamp(1.25rem, 1.14rem + 0.55vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.28rem + 1.1vw, 1.875rem); /* ~title */ --text-3xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem); --text-4xl: clamp(2.5rem, 1.9rem + 3vw, 4rem); --text-hero: clamp(3rem, 2rem + 5.5vw, 6.5rem); --leading-display: 1.222; /* 44/36 */ --leading-title: 1.233; /* 37/30 */ --leading-body: 1.4; /* 21/15 */ --leading-caption: 1.364; /* 15/11 */ /* Tracking in em, converted from the source's px-at-size values */ --track-display: -0.019em; /* -0.7 at 36 */ --track-title: -0.007em; /* -0.2 at 30 */ --track-label: 0.127em; /* 1.4 at 11 */ --track-caption: 0.064em; /* 0.7 at 11 */ /* ---------- Radius ---------- */ --radius: 24px; /* RADIUS - cards, sheets */ --radius-sm: 16px; /* RADIUS_SM - inputs, chips */ --radius-pill: 999px; /* ---------- WEB: space (8pt) ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* Applied to both edges of every band, so the gap between two sections is twice this. At the old 9rem cap that was 288px of dead space on desktop. */ --section-y: clamp(2.75rem, 1.5rem + 3.5vw, 5.25rem); --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); --max-w: 1280px; --max-w-prose: 66ch; /* ---------- WEB: motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 260ms; /* DRAW_MS in mark.tsx - the mark's own strike */ --dur-slow: 480ms; --dur-reveal: 720ms; } /* ============================================================ Semantic layer. Style components through THESE, never the raw palette above. Dark is the brand's home context; light is a first-class second, not an inversion. ============================================================ */ :root, [data-theme='light'], .on-light { --surface-page: var(--e-light-bg); --surface-grad: linear-gradient(160deg, var(--e-light-bg-grad-0), var(--e-light-bg-grad-1)); --surface-glass: var(--e-light-glass); --border-subtle: var(--e-light-glass-brd); --surface-muted: var(--e-light-muted); /* the BACKGROUND gradient stop, not the accent one - e-light-grad-1 is #08715F, a dark green, and using it here painted whole bands in it */ --surface-alt: var(--e-light-bg-grad-1); /* #EDEFE6 - accent scores 4.61 here */ --text-primary: var(--e-light-fg); --text-muted: var(--e-light-fg-muted); --accent: var(--e-light-primary); /* 4.9:1 on page - AA */ --accent-fg: var(--e-light-primary-fg); --accent-grad: linear-gradient(135deg, var(--e-light-grad-0), var(--e-light-grad-1)); --gold: var(--e-light-gold); --danger: var(--e-light-danger); --mark-struck-0: #08715F; /* light accent ramp, t=0 */ --mark-struck-1: #09765A; /* light accent ramp, t=0.5 */ --mark-struck-2: #0A7A54; /* light accent ramp, t=1 */ --mark-open: var(--e-light-fg-muted); --focus-ring: var(--e-light-primary); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --surface-page: var(--e-dark-bg); --surface-grad: linear-gradient(160deg, var(--e-dark-bg-grad-0), var(--e-dark-bg-grad-1)); --surface-glass: var(--e-dark-glass); --border-subtle: var(--e-dark-glass-brd); --surface-muted: var(--e-dark-muted); --surface-alt: var(--e-dark-bg-grad-1); /* accent scores 9.49 here */ --text-primary: var(--e-dark-fg); --text-muted: var(--e-dark-fg-muted); --accent: var(--e-dark-primary); /* 11.5:1 on page */ --accent-fg: var(--e-dark-primary-fg); --accent-grad: linear-gradient(135deg, var(--e-dark-grad-0), var(--e-dark-grad-1)); --gold: var(--e-dark-gold); --danger: var(--e-dark-danger); --mark-struck-0: #1FB894; --mark-struck-1: #2AC697; --mark-struck-2: #34D399; --mark-open: var(--e-dark-fg-muted); --focus-ring: var(--e-dark-primary); } } [data-theme='dark'], .on-dark { --surface-page: var(--e-dark-bg); --surface-grad: linear-gradient(160deg, var(--e-dark-bg-grad-0), var(--e-dark-bg-grad-1)); --surface-glass: var(--e-dark-glass); --border-subtle: var(--e-dark-glass-brd); --surface-muted: var(--e-dark-muted); --surface-alt: var(--e-dark-bg-grad-1); /* accent scores 9.49 here */ --text-primary: var(--e-dark-fg); --text-muted: var(--e-dark-fg-muted); --accent: var(--e-dark-primary); --accent-fg: var(--e-dark-primary-fg); --accent-grad: linear-gradient(135deg, var(--e-dark-grad-0), var(--e-dark-grad-1)); --gold: var(--e-dark-gold); --danger: var(--e-dark-danger); --mark-struck-0: #1FB894; --mark-struck-1: #2AC697; --mark-struck-2: #34D399; --mark-open: var(--e-dark-fg-muted); --focus-ring: var(--e-dark-primary); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; } }