/* ========================================================================== Campaign Kit design tokens · v1.0 · Design Council, 2026-10-21 Import once at the app root: @import "./design-tokens.css"; Light is the default theme. Dark ("Night") applies with [data-theme="night"] on , or automatically via prefers-color-scheme when [data-theme="auto"] is set. Contrast ratios are WCAG 2.x relative-luminance ratios, verified by script. AA body text needs 4.5:1, large text (24px, or 18.66px bold) and UI component boundaries need 3:1. ========================================================================== */ :root { color-scheme: light; /* ---------- Raw palette (do not use directly in components) ---------- */ --flare-50: #FFF4F0; --flare-100: #FFF1EC; --flare-200: #FFD9CC; --flare-300: #FFB39E; --flare-400: #FF7A5C; --flare-500: #FF5A36; /* brand Flare: glows, illustration, focus ring, large display */ --flare-600: #D93A1C; /* white text on it: 4.59:1, the primary button fill */ --flare-700: #B8301A; /* text on white 6.04, on flare-100 5.48 */ --sun-400: #FFD60A; /* ink on it 11.92 */ --sun-500: #FFB000; /* ink on it 9.19 */ --sky-500: #2F7BFF; --sky-600: #0E5BD8; /* text on white 5.99, on sky-50 5.37 */ --sky-50: #ECF3FF; --mint-500: #2BD27E; --mint-700: #1F7A45; /* text on white 5.35, on mint-50 4.85 */ --mint-50: #EAF7EF; --plum-500: #8B5CF6; /* illustration only, never a UI accent */ --amber-700: #A35A00; /* text on white 5.22 */ --amber-50: #FFF6E5; --red-700: #B42318; /* text on white 6.57 */ --red-50: #FEF0EE; --gray-0: #FFFFFF; --gray-25: #FBFBFD; --gray-50: #F5F5F7; --gray-100: #EDEDF0; --gray-200: #E3E3E8; --gray-300: #D2D2D7; --gray-400: #AEAEB2; --gray-500: #8A8A8E; /* 3.4:1 on white: icons and decorative only */ --gray-600: #6E6E73; /* 5.07 on white, 4.66 on gray-50, secondary text */ --gray-800: #3A3A3C; --gray-900: #1D1D1F; /* 16.83 on white, primary ink */ /* ---------- Semantic color: surfaces ---------- */ --bg-canvas: var(--gray-50); /* app background */ --bg-surface: var(--gray-0); /* cards, sheets */ --bg-surface-2: var(--gray-25); /* nested wells inside cards */ --bg-sunken: var(--gray-100); /* segmented-control tracks, inputs */ --bg-hover: rgba(29, 29, 31, .05); --bg-pressed: rgba(29, 29, 31, .09); --bg-selected: var(--flare-100); --bg-inverse: var(--gray-900); /* ---------- Semantic color: text (pair: on --bg-surface unless noted) ---------- */ --text-primary: var(--gray-900); /* 16.83 */ --text-secondary: var(--gray-600); /* 5.07 surface, 4.66 canvas */ --text-tertiary: var(--gray-500); /* 3.4: decorative or disabled ONLY, never body copy */ --text-inverse: #FFFFFF; /* on --bg-inverse 16.83 */ --text-accent: var(--flare-700); /* links and inline accent text, 6.04 */ --text-on-accent: #FFFFFF; /* on --accent 4.59 */ --text-success: var(--mint-700); --text-warning: var(--amber-700); --text-danger: var(--red-700); --text-info: var(--sky-600); /* ---------- Semantic color: accent and status ---------- */ --accent: var(--flare-600); /* primary buttons, selected tab text */ --accent-hover: #C8341A; --accent-pressed: var(--flare-700); --accent-vivid: var(--flare-500); /* non-text: progress, rings, sparkles (3.10, passes 1.4.11) */ --accent-tint: var(--flare-100); /* chip/selected backgrounds; text on it: --text-accent */ --success-tint: var(--mint-50); --warning-tint: var(--amber-50); --danger-tint: var(--red-50); --info-tint: var(--sky-50); /* ---------- Borders and focus ---------- */ --border-hairline: rgba(29, 29, 31, .08); /* card edges, 0.5px on 2x displays */ --border-default: rgba(29, 29, 31, .14); --border-strong: #8A8A8E; /* input borders: 3.4:1 vs white (1.4.11) */ --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--flare-500); --focus-ring-inset: inset 0 0 0 2px var(--flare-500); /* ---------- Kit theming (set per kit at runtime) ---------- Organizers pick a brand color. The server computes --kit-on-accent as #FFFFFF or #1D1D1F, whichever reaches 4.5:1; if neither does, the color is darkened in OKLCH until white reaches 4.5:1. --kit-accent-ink is the text-safe variant for use on white. Defaults fall back to Flare. */ --kit-accent: var(--accent); --kit-on-accent: var(--text-on-accent); --kit-accent-ink: var(--text-accent); --kit-accent-tint: var(--accent-tint); --kit-glow-1: #FF7A5C; --kit-glow-2: #FFD60A; --kit-glow-3: #2F7BFF; /* ---------- Platform colors (icons, share-sheet tiles) ---------- The -on value is the glyph/text color that passes on the fill. */ --pf-linkedin: #0A66C2; --pf-linkedin-on: #FFFFFF; /* 5.69 */ --pf-facebook: #0866FF; --pf-facebook-on: #FFFFFF; /* 4.82 */ --pf-x: #000000; --pf-x-on: #FFFFFF; --pf-threads: #000000; --pf-threads-on: #FFFFFF; --pf-whatsapp: #25D366; --pf-whatsapp-on: #0B1F12; /* 8.69, dark glyph */ --pf-instagram: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 55%, #962FBF 80%, #4F5BD5 100%); --pf-instagram-on: #FFFFFF; --pf-email: #1D1D1F; --pf-email-on: #FFFFFF; --pf-sms: #34C759; --pf-sms-on: #0B1F12; /* ---------- Signature gradients ("Aurora") ---------- Liveliness comes from soft color fields behind content, never from saturated full-bleed backgrounds under text. */ --aurora-light: radial-gradient(60% 50% at 15% 10%, rgba(255, 122, 92, .30) 0%, transparent 60%), radial-gradient(50% 45% at 90% 0%, rgba(255, 214, 10, .26) 0%, transparent 60%), radial-gradient(55% 50% at 70% 85%, rgba(47, 123, 255, .16) 0%, transparent 60%); --aurora-kit: radial-gradient(70% 60% at 10% 0%, color-mix(in srgb, var(--kit-glow-1) 55%, transparent) 0%, transparent 65%), radial-gradient(60% 55% at 100% 10%, color-mix(in srgb, var(--kit-glow-2) 45%, transparent) 0%, transparent 65%), radial-gradient(70% 60% at 60% 100%, color-mix(in srgb, var(--kit-glow-3) 30%, transparent) 0%, transparent 65%); /* ---------- Typography ---------- SF Pro on Apple platforms via system-ui; Segoe UI Variable on Windows; Roboto on Android; Helvetica Neue and Arial as last resort. */ --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif; /* numbers, counters, badges */ --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Scale follows Apple's text styles (px, line-height, tracking). */ --type-hero-size: 64px; --type-hero-lh: 1.03; --type-hero-track: -0.035em; --type-hero-weight: 700; --type-display-size: 44px; --type-display-lh: 1.06; --type-display-track: -0.03em; --type-display-weight: 700; --type-title1-size: 30px; --type-title1-lh: 1.13; --type-title1-track: -0.022em; --type-title1-weight: 700; --type-title2-size: 22px; --type-title2-lh: 1.18; --type-title2-track: -0.018em; --type-title2-weight: 650; --type-title3-size: 19px; --type-title3-lh: 1.25; --type-title3-track: -0.012em; --type-title3-weight: 600; --type-headline-size: 17px; --type-headline-lh: 1.3; --type-headline-track: -0.01em; --type-headline-weight: 600; --type-body-size: 17px; --type-body-lh: 1.47; --type-body-track: -0.01em; --type-body-weight: 400; --type-callout-size: 15px; --type-callout-lh: 1.45; --type-callout-track: -0.006em; --type-callout-weight: 400; --type-subhead-size: 14px; --type-subhead-lh: 1.4; --type-subhead-track: -0.004em; --type-subhead-weight: 500; --type-footnote-size: 13px; --type-footnote-lh: 1.38; --type-footnote-track: 0; --type-footnote-weight: 400; --type-caption-size: 12px; --type-caption-lh: 1.33; --type-caption-track: 0.005em; --type-caption-weight: 500; --type-overline-size: 11px; --type-overline-lh: 1.2; --type-overline-track: 0.06em; --type-overline-weight: 650; /* uppercase labels */ /* Desktop app UI runs one step tighter (body 15, callout 14). */ --type-ui-body-size: 15px; --type-ui-small-size: 13px; /* ---------- Spacing (4pt grid) ---------- */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px; --space-13: 120px; --gutter-mobile: 16px; --gutter-desktop: 32px; --tap-min: 44px; /* HIG minimum; WCAG 2.5.8 min is 24px */ --content-max: 1200px; --reading-max: 640px; /* ---------- Radii (continuous-corner feel: nested radius = outer - padding) ---------- */ --radius-xs: 6px; --radius-sm: 10px; /* inputs, small buttons */ --radius-md: 14px; /* buttons, chips, list cells */ --radius-lg: 20px; /* cards */ --radius-xl: 28px; /* hero cards, sheets */ --radius-2xl: 36px; /* phone-frame, marketing art */ --radius-pill: 999px; /* ---------- Elevation: shadows ---------- */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(29, 29, 31, .06), 0 0 0 0.5px rgba(29, 29, 31, .06); --shadow-2: 0 2px 6px rgba(29, 29, 31, .05), 0 8px 24px -6px rgba(29, 29, 31, .10), 0 0 0 0.5px rgba(29, 29, 31, .06); --shadow-3: 0 4px 12px rgba(29, 29, 31, .06), 0 24px 48px -12px rgba(29, 29, 31, .18), 0 0 0 0.5px rgba(29, 29, 31, .06); --shadow-4: 0 12px 24px rgba(29, 29, 31, .08), 0 40px 80px -20px rgba(29, 29, 31, .28), 0 0 0 0.5px rgba(29, 29, 31, .08); --shadow-glow: 0 10px 30px -8px color-mix(in srgb, var(--kit-accent) 55%, transparent); --shadow-inset-well: inset 0 1px 2px rgba(29, 29, 31, .06); /* ---------- Materials (translucent blur, HIG "materials") ---------- Always pair with -webkit-backdrop-filter. Provide the solid fallback for prefers-reduced-transparency and unsupported browsers. */ --material-ultrathin-bg: rgba(255, 255, 255, .55); --material-thin-bg: rgba(255, 255, 255, .72); --material-regular-bg: rgba(255, 255, 255, .82); --material-thick-bg: rgba(250, 250, 252, .92); --material-solid-bg: #FFFFFF; --material-blur: saturate(180%) blur(20px); --material-blur-strong: saturate(190%) blur(32px); --material-edge: 0 0 0 0.5px rgba(29, 29, 31, .08), inset 0 0.5px 0 rgba(255, 255, 255, .7); /* ---------- Motion ---------- */ --dur-instant: 90ms; /* press-down, color flips */ --dur-fast: 160ms; /* hovers, toggles, chip select */ --dur-base: 240ms; /* segmented thumb, tab content crossfade */ --dur-slow: 360ms; /* sheets, cards entering */ --dur-slower: 520ms; /* hero entrance, page transitions */ --dur-ambient: 18s; /* aurora drift loop */ --ease-standard: cubic-bezier(.2, 0, 0, 1); /* most UI movement */ --ease-decelerate: cubic-bezier(.05, .7, .1, 1); /* things entering */ --ease-accelerate: cubic-bezier(.3, 0, .8, .15); /* things leaving */ --ease-press: cubic-bezier(.25, .1, .25, 1); /* Springs as CSS linear(). Duration tokens are their settle times. */ --ease-spring-snappy: linear(0, 0.03, 0.104, 0.207, 0.323, 0.441, 0.556, 0.66, 0.752, 0.831, 0.895, 0.946, 0.984, 1.012, 1.031, 1.042, 1.048, 1.049, 1.047, 1.043, 1.038, 1.032, 1.026, 1.021, 1.016, 1.011, 1.008, 1.005, 1.002, 1.001, 0.999, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 0.999, 1); --dur-spring-snappy: 600ms; /* stiffness 300, damping 24, ~5% overshoot */ --ease-spring-bouncy: linear(0, 0.064, 0.223, 0.431, 0.647, 0.843, 1.002, 1.114, 1.18, 1.205, 1.197, 1.168, 1.127, 1.083, 1.041, 1.006, 0.981, 0.965, 0.959, 0.959, 0.964, 0.972, 0.981, 0.99, 0.997, 1.003, 1.007, 1.008, 1.009, 1.008, 1.006, 1.004, 1.003, 1.001, 1, 0.999, 0.998, 0.998, 0.998, 0.999, 1); --dur-spring-bouncy: 760ms; /* stiffness 400, damping 18, ~20% overshoot: celebration only */ --ease-spring-gentle: linear(0, 0.023, 0.078, 0.151, 0.233, 0.318, 0.399, 0.476, 0.547, 0.611, 0.668, 0.717, 0.761, 0.798, 0.831, 0.858, 0.881, 0.901, 0.918, 0.932, 0.944, 0.953, 0.962, 0.968, 0.974, 0.979, 0.982, 0.986, 0.988, 0.99, 0.992, 0.994, 0.995, 0.996, 0.997, 0.997, 0.998, 0.998, 0.998, 0.999, 1); --dur-spring-gentle: 700ms; /* stiffness 170, damping 26, no overshoot */ --press-scale: .97; --lift-y: -2px; --stagger: 40ms; /* list item entrance stagger, max 8 items */ /* ---------- Z-index ---------- */ --z-base: 0; --z-sticky: 100; --z-dock: 200; --z-popover: 400; --z-sheet: 500; --z-toast: 900; } /* ---------- Night theme: warm graphite, lit by the kit's own color ---------- Not a "portal": surfaces are warm (not blue-black), the aurora glows brighter, and accent colors keep full saturation. */ :root[data-theme="night"] { color-scheme: dark; --bg-canvas: #1C1712; --bg-surface: #26201A; --bg-surface-2: #2E2720; --bg-sunken: #15110D; --bg-hover: rgba(246, 241, 234, .06); --bg-pressed: rgba(246, 241, 234, .10); --bg-selected: rgba(255, 122, 92, .16); --bg-inverse: #F6F1EA; --text-primary: #F6F1EA; /* 15.83 on canvas */ --text-secondary: #B5AEA7; /* 8.11 on canvas */ --text-tertiary: #9B9590; /* 6.01 on canvas */ --text-inverse: #1C1712; --text-accent: #FF8A6E; /* 7.4 on surface */ --text-on-accent: #1C1712; /* 6.94 on --accent */ --text-success: #5FE0A0; --text-warning: #FFC24D; --text-danger: #FF8A80; --text-info: #8AB4FF; --accent: #FF7A5C; --accent-hover: #FF8E74; --accent-pressed: #FF6A48; --accent-vivid: #FF7A5C; --accent-tint: rgba(255, 122, 92, .16); --success-tint: rgba(95, 224, 160, .14); --warning-tint: rgba(255, 194, 77, .14); --danger-tint: rgba(255, 138, 128, .14); --info-tint: rgba(138, 180, 255, .14); --border-hairline: rgba(246, 241, 234, .08); --border-default: rgba(246, 241, 234, .14); --border-strong: #8F8780; --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px #FF7A5C; --kit-accent: var(--accent); --kit-on-accent: var(--text-on-accent); --kit-accent-ink: var(--text-accent); --kit-accent-tint: var(--accent-tint); --pf-x: #F6F1EA; --pf-x-on: #000000; --pf-threads: #F6F1EA; --pf-threads-on: #000000; --pf-email: #F6F1EA; --pf-email-on: #1C1712; --aurora-light: radial-gradient(60% 50% at 15% 10%, rgba(255, 122, 92, .34) 0%, transparent 60%), radial-gradient(50% 45% at 90% 0%, rgba(255, 176, 0, .22) 0%, transparent 60%), radial-gradient(55% 50% at 70% 85%, rgba(47, 123, 255, .22) 0%, transparent 60%); --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 0.5px rgba(246, 241, 234, .06); --shadow-2: 0 2px 6px rgba(0, 0, 0, .3), 0 8px 24px -6px rgba(0, 0, 0, .45), 0 0 0 0.5px rgba(246, 241, 234, .07); --shadow-3: 0 4px 12px rgba(0, 0, 0, .35), 0 24px 48px -12px rgba(0, 0, 0, .6), 0 0 0 0.5px rgba(246, 241, 234, .08); --shadow-4: 0 12px 24px rgba(0, 0, 0, .4), 0 40px 80px -20px rgba(0, 0, 0, .7), 0 0 0 0.5px rgba(246, 241, 234, .1); --material-ultrathin-bg: rgba(38, 32, 26, .50); --material-thin-bg: rgba(38, 32, 26, .66); --material-regular-bg: rgba(38, 32, 26, .78); --material-thick-bg: rgba(30, 25, 20, .90); --material-solid-bg: #26201A; --material-edge: 0 0 0 0.5px rgba(246, 241, 234, .10), inset 0 0.5px 0 rgba(246, 241, 234, .08); } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --bg-canvas: #1C1712; --bg-surface: #26201A; --bg-surface-2: #2E2720; --bg-sunken: #15110D; --bg-hover: rgba(246, 241, 234, .06); --bg-pressed: rgba(246, 241, 234, .10); --bg-selected: rgba(255, 122, 92, .16); --bg-inverse: #F6F1EA; --text-primary: #F6F1EA; /* 15.83 on canvas */ --text-secondary: #B5AEA7; /* 8.11 on canvas */ --text-tertiary: #9B9590; /* 6.01 on canvas */ --text-inverse: #1C1712; --text-accent: #FF8A6E; /* 7.4 on surface */ --text-on-accent: #1C1712; /* 6.94 on --accent */ --text-success: #5FE0A0; --text-warning: #FFC24D; --text-danger: #FF8A80; --text-info: #8AB4FF; --accent: #FF7A5C; --accent-hover: #FF8E74; --accent-pressed: #FF6A48; --accent-vivid: #FF7A5C; --accent-tint: rgba(255, 122, 92, .16); --success-tint: rgba(95, 224, 160, .14); --warning-tint: rgba(255, 194, 77, .14); --danger-tint: rgba(255, 138, 128, .14); --info-tint: rgba(138, 180, 255, .14); --border-hairline: rgba(246, 241, 234, .08); --border-default: rgba(246, 241, 234, .14); --border-strong: #8F8780; --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px #FF7A5C; --kit-accent: var(--accent); --kit-on-accent: var(--text-on-accent); --kit-accent-ink: var(--text-accent); --kit-accent-tint: var(--accent-tint); --pf-x: #F6F1EA; --pf-x-on: #000000; --pf-threads: #F6F1EA; --pf-threads-on: #000000; --pf-email: #F6F1EA; --pf-email-on: #1C1712; --aurora-light: radial-gradient(60% 50% at 15% 10%, rgba(255, 122, 92, .34) 0%, transparent 60%), radial-gradient(50% 45% at 90% 0%, rgba(255, 176, 0, .22) 0%, transparent 60%), radial-gradient(55% 50% at 70% 85%, rgba(47, 123, 255, .22) 0%, transparent 60%); --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 0.5px rgba(246, 241, 234, .06); --shadow-2: 0 2px 6px rgba(0, 0, 0, .3), 0 8px 24px -6px rgba(0, 0, 0, .45), 0 0 0 0.5px rgba(246, 241, 234, .07); --shadow-3: 0 4px 12px rgba(0, 0, 0, .35), 0 24px 48px -12px rgba(0, 0, 0, .6), 0 0 0 0.5px rgba(246, 241, 234, .08); --shadow-4: 0 12px 24px rgba(0, 0, 0, .4), 0 40px 80px -20px rgba(0, 0, 0, .7), 0 0 0 0.5px rgba(246, 241, 234, .1); --material-ultrathin-bg: rgba(38, 32, 26, .50); --material-thin-bg: rgba(38, 32, 26, .66); --material-regular-bg: rgba(38, 32, 26, .78); --material-thick-bg: rgba(30, 25, 20, .90); --material-solid-bg: #26201A; --material-edge: 0 0 0 0.5px rgba(246, 241, 234, .10), inset 0 0.5px 0 rgba(246, 241, 234, .08); } } /* ---------- Accessibility preferences ---------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 120ms; /* keep short crossfades: opacity only */ --dur-slow: 160ms; --dur-slower: 200ms; --dur-ambient: 0s; /* aurora frozen */ --dur-spring-snappy: 160ms; --dur-spring-bouncy: 160ms; --dur-spring-gentle: 160ms; --ease-spring-snappy: ease-out; --ease-spring-bouncy: ease-out; --ease-spring-gentle: ease-out; --press-scale: 1; --lift-y: 0px; --stagger: 0ms; } } @media (prefers-reduced-transparency: reduce) { :root { --material-ultrathin-bg: var(--material-solid-bg); --material-thin-bg: var(--material-solid-bg); --material-regular-bg: var(--material-solid-bg); --material-thick-bg: var(--material-solid-bg); --material-blur: none; --material-blur-strong: none; } } @media (prefers-contrast: more) { :root { --text-secondary: #3A3A3C; --border-hairline: rgba(29, 29, 31, .3); --border-default: rgba(29, 29, 31, .5); --border-strong: #3A3A3C; } } @media (forced-colors: active) { :root { --focus-ring: 0 0 0 3px Highlight; } } /* ---------- Minimal utilities that every surface relies on ---------- */ .u-material { background: var(--material-regular-bg); -webkit-backdrop-filter: var(--material-blur); backdrop-filter: var(--material-blur); box-shadow: var(--material-edge); } .u-focusable:focus-visible { outline: none; box-shadow: var(--focus-ring); } .u-num { font-family: var(--font-rounded); font-variant-numeric: tabular-nums; } .u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }