/* * CoreSense Design Tokens * Brand Bible v1.2 — locked * * Single source of truth for all values in the system. * Never hardcode a hex, size, duration, or easing value in a component. * Always reference a token from this file. * * Structure: * 01. Primary colors * 02. Surface system * 03. Semantic colors * 04. Head / Heart / Hands layer colors * 05. Typography * 06. Spacing * 07. Border radius * 08. Motion * 09. Shadows and glows * 10. Z-index * 11. Breakpoints * 12. Component tokens */ :root { /* ───────────────────────────────────────────────────────────────── * 01. PRIMARY COLORS * The three primaries + their registers. * Signal Violet: connective tissue — appears in every context. * Magenta: discovery and Heart accent — neon on dark, jewel on light. * Teal: enlightenment and Hands accent — jewel on light, neon on dark (crossover only). * ───────────────────────────────────────────────────────────────── */ /* Signal Violet */ --color-signal: #6B4FCE; --color-signal-glow: #A48FE8; --color-signal-deep: #1C1845; /* Deep Current — also a surface token */ /* Electric Magenta */ --color-magenta-neon: #E8196A; /* dark surfaces only */ --color-magenta-jewel: #B8104E; /* light surfaces only */ /* Electric Teal */ --color-teal-neon: #00E5CC; /* dark surfaces — crossover use only */ --color-teal-jewel: #009E8C; /* light surfaces — primary */ --color-teal-deep: #007A6E; /* text on teal-tinted light backgrounds */ /* ───────────────────────────────────────────────────────────────── * 02. SURFACE SYSTEM * Dark = discovery (input, unknown, in-process). * Light = enlightenment (output, revealed, known). * Nav chrome transitions with the content surface — always. * ───────────────────────────────────────────────────────────────── */ /* Discovery surface — dark */ --surface-discovery-page: #0C0B1A; /* Void */ --surface-discovery-card: #1C1845; /* Deep Current */ --surface-discovery-border: rgba(107, 79, 206, 0.2); /* Signal Violet at low opacity */ --surface-discovery-border-emphasis: rgba(107, 79, 206, 0.35); /* Enlightenment surface — light */ --surface-enlighten-page: #F5F3EF; /* Surface Warm */ --surface-enlighten-card: #EFEDE8; /* Surface Raised */ --surface-enlighten-border: #DDDBE8; /* Fog */ --surface-enlighten-border-subtle: #C8C5D6; /* Mist */ /* Text on discovery (dark) surface */ --text-discovery-primary: rgba(255, 255, 255, 0.85); --text-discovery-secondary: rgba(255, 255, 255, 0.50); --text-discovery-tertiary: rgba(255, 255, 255, 0.30); --text-discovery-label: #A48FE8; /* Signal Glow — section labels */ /* Text on enlightenment (light) surface */ --text-enlighten-primary: #0C0B1A; /* Void */ --text-enlighten-secondary: #444441; /* Charcoal */ --text-enlighten-tertiary: #888780; /* Medium gray */ --text-enlighten-label: #888780; /* Section labels — uppercase tracked */ /* Current surface — set on a parent element via JS/class, consumed by children */ /* Usage: data-surface="discovery" or data-surface="enlightenment" on or section wrapper */ --surface-page: var(--surface-discovery-page); --surface-card: var(--surface-discovery-card); --surface-border: var(--surface-discovery-border); --text-primary: var(--text-discovery-primary); --text-secondary: var(--text-discovery-secondary); --text-tertiary: var(--text-discovery-tertiary); --text-label: var(--text-discovery-label); --accent-primary: var(--color-magenta-neon); --accent-secondary: var(--color-teal-neon); /* ───────────────────────────────────────────────────────────────── * 03. SEMANTIC COLORS * For system states only. Never applied to people, teams, or trait data. * ───────────────────────────────────────────────────────────────── */ --color-success: #1D9E75; --color-success-subtle: rgba(29, 158, 117, 0.10); --color-success-text: #0F6E56; --color-caution: #BA7517; --color-caution-subtle: rgba(186, 117, 23, 0.10); --color-caution-text: #854F0B; --color-danger: #A32D2D; --color-danger-subtle: rgba(163, 45, 45, 0.10); --color-danger-text: #791F1F; /* ───────────────────────────────────────────────────────────────── * 04. HEAD / HEART / HANDS LAYER COLORS * Assigned by intrinsic character, not surface state. * Always use the register appropriate for the current surface. * ───────────────────────────────────────────────────────────────── */ /* Head — cognitive, analytical, structural. Signal Violet always. */ --layer-head: #6B4FCE; --layer-head-secondary: #A48FE8; --layer-head-subtle-dark: rgba(107, 79, 206, 0.20); --layer-head-subtle-light: rgba(107, 79, 206, 0.10); --layer-head-text-dark: #A48FE8; --layer-head-text-light: #6B4FCE; /* Heart — values, relational, alive. Magenta — register by surface. */ --layer-heart-dark: #E8196A; /* neon — on dark surfaces */ --layer-heart-light: #B8104E; /* jewel — on light surfaces */ --layer-heart-subtle-dark: rgba(232, 25, 106, 0.15); --layer-heart-subtle-light:rgba(184, 16, 78, 0.08); --layer-heart-text-dark: #E8196A; --layer-heart-text-light: #B8104E; /* Hands — behavioral, execution, directed. Teal — register by surface. */ --layer-hands-dark: #00E5CC; /* neon — crossover on dark (reduced opacity) */ --layer-hands-light: #009E8C; /* jewel — on light surfaces */ --layer-hands-subtle-dark: rgba(0, 229, 204, 0.12); --layer-hands-subtle-light:rgba(0, 158, 140, 0.10); --layer-hands-text-dark: rgba(0, 229, 204, 0.70); --layer-hands-text-light: #007A6E; /* Shadow register — always 70–75% opacity on whichever layer color applies */ --layer-shadow-opacity: 0.72; /* ───────────────────────────────────────────────────────────────── * 05. TYPOGRAPHY * Fraunces: display and editorial (H1, H2, hero). Google Fonts. Free. * DM Sans: body and UI. Google Fonts. Free. * JetBrains Mono: data and technical contexts only. Google Fonts. Free. * ───────────────────────────────────────────────────────────────── */ --font-display: 'Fraunces', Georgia, serif; --font-sans: 'DM Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Scale */ --text-hero: clamp(64px, 8vw, 96px); --text-h1: clamp(42px, 5vw, 64px); --text-h2: clamp(30px, 4vw, 44px); --text-h3: 26px; --text-h4: 21px; --text-body-large: 18px; --text-body: 16px; --text-caption: 14px; --text-label: 12px; --text-mono: 13px; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 600; --weight-hero: 700; /* Line heights */ --leading-hero: 1.00; --leading-h1: 1.05; --leading-h2: 1.10; --leading-h3: 1.20; --leading-body-large: 1.75; --leading-body: 1.70; --leading-caption: 1.60; --leading-label: 1.40; --leading-mono: 1.60; /* Letter spacing */ --tracking-label: 0.04em; /* UI labels, tags, badges */ --tracking-overline: 0.09em; /* section overlines in uppercase */ --tracking-default: 0; /* ───────────────────────────────────────────────────────────────── * 06. SPACING * Base unit: 8px. All spacing is a multiple of 4px minimum. * ───────────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; --space-48: 192px; /* Component-level spacing */ --padding-card: var(--space-6); /* 24px — all card internal padding */ --padding-section-v: var(--space-24); /* 96px — desktop section vertical padding */ --padding-section-v-md:var(--space-16); /* 64px — tablet */ --padding-section-v-sm:var(--space-12); /* 48px — mobile */ --gap-grid: var(--space-8); /* 32px — desktop column gutter */ --gap-grid-md: var(--space-6); /* 24px — tablet */ --gap-grid-sm: var(--space-4); /* 16px — mobile */ --margin-page: 80px; /* minimum side margins desktop */ --margin-page-md: 40px; --margin-page-sm: 16px; --max-content-width: 1200px; /* ───────────────────────────────────────────────────────────────── * 07. BORDER RADIUS * ───────────────────────────────────────────────────────────────── */ --radius-sm: 4px; /* subtle — inner elements */ --radius-md: 8px; /* buttons, inputs, small cards */ --radius-lg: 12px; /* standard cards */ --radius-xl: 16px; /* large cards, modals */ --radius-pill: 20px; /* tags, chips, badges */ --radius-full: 9999px; /* avatars, circular marks */ /* ───────────────────────────────────────────────────────────────── * 08. MOTION * Slow and deliberate. Recognition and clarity, not excitement. * The surface flip is the brand's signature motion — always 600ms. * ───────────────────────────────────────────────────────────────── */ /* Durations */ --duration-instant: 100ms; --duration-fast: 200ms; /* hover states */ --duration-normal: 300ms; --duration-page: 500ms; /* page transitions */ --duration-reveal: 600ms; /* element reveal on scroll */ --duration-surface-flip: 600ms; /* THE signature motion — never shorten */ --duration-terminus: 400ms; /* mark terminus dot shift */ --duration-stagger: 80ms; /* between trait items */ --duration-network: 10000ms;/* network motif drift — 10s loop */ /* Easings */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* page transitions */ --ease-reveal: cubic-bezier(0.4, 0, 0.6, 1); /* scroll reveals */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* trait stagger */ --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1); /* surface flip, terminus */ --ease-hover: ease-in-out; /* Scroll reveal transform */ --reveal-offset-y: 16px; /* elements fade up from 16px below their resting position */ /* ───────────────────────────────────────────────────────────────── * 09. SHADOWS AND GLOWS * Glows are only ever applied to Magenta or Teal on dark surfaces. * Never apply glows on light (enlightenment) surfaces. * Never use drop shadows as decoration — only for functional focus rings. * ───────────────────────────────────────────────────────────────── */ /* Magenta glow — dark surfaces only */ --glow-magenta-sm: 0 0 10px rgba(232, 25, 106, 0.40); --glow-magenta-md: 0 0 18px rgba(232, 25, 106, 0.50); --glow-magenta-lg: 0 0 28px rgba(232, 25, 106, 0.60); /* Teal glow — dark surfaces only, crossover contexts */ --glow-teal-sm: 0 0 8px rgba(0, 229, 204, 0.35); --glow-teal-md: 0 0 14px rgba(0, 229, 204, 0.40); /* Signal glow — terminus dot on nav/marketing */ --glow-signal-sm: 0 0 8px rgba(107, 79, 206, 0.40); --glow-signal-md: 0 0 16px rgba(107, 79, 206, 0.50); /* Focus ring — accessibility, both surfaces */ --focus-ring-discovery: 0 0 0 3px rgba(232, 25, 106, 0.50); --focus-ring-enlighten: 0 0 0 3px rgba(0, 158, 140, 0.40); /* ───────────────────────────────────────────────────────────────── * 10. Z-INDEX * ───────────────────────────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; /* cards, floating elements */ --z-nav: 100; /* navigation chrome */ --z-overlay: 200; /* modals, drawers */ --z-toast: 300; /* notifications */ /* ───────────────────────────────────────────────────────────────── * 11. BREAKPOINTS (reference only — use in media queries) * --bp-sm: 640px * --bp-md: 768px * --bp-lg: 1024px * --bp-xl: 1280px * --bp-2xl: 1440px * ───────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────────────── * 12. COMPONENT TOKENS * Composed from the primitives above. * These are the values components should actually consume. * ───────────────────────────────────────────────────────────────── */ /* Buttons */ --btn-primary-bg: var(--color-magenta-neon); /* discovery surface */ --btn-primary-bg-light: var(--color-teal-jewel); /* enlightenment surface */ --btn-primary-text: #ffffff; --btn-primary-shadow: var(--glow-magenta-md); /* dark surface only */ --btn-radius: var(--radius-md); --btn-font: var(--font-sans); --btn-size: var(--text-body); --btn-weight: var(--weight-bold); --btn-ghost-border-dark: rgba(255, 255, 255, 0.30); --btn-ghost-text-dark: rgba(255, 255, 255, 0.80); --btn-ghost-border-light: #DDDBE8; --btn-ghost-text-light: #0C0B1A; /* Input fields — discovery surface */ --input-bg: #1C1845; --input-border: rgba(107, 79, 206, 0.25); --input-border-active: var(--color-magenta-neon); --input-shadow-active: 0 0 16px rgba(232, 25, 106, 0.20); --input-text: rgba(255, 255, 255, 0.85); --input-placeholder: rgba(255, 255, 255, 0.30); --input-radius: var(--radius-md); /* Profile cards — enlightenment surface */ --profile-card-bg: var(--surface-enlighten-card); --profile-card-border: var(--surface-enlighten-border); --profile-card-radius: var(--radius-lg); --profile-card-padding: var(--padding-card); /* Trait register borders */ --trait-forefront-border: var(--layer-head); /* Signal Violet — Head structural */ --trait-undercurrent-border: var(--layer-hands-light); /* Teal jewel — surfaces what was below */ --trait-shadow-border: #DDDBE8; /* Fog — appropriately muted */ --trait-shadow-opacity: var(--layer-shadow-opacity); /* 0.72 */ /* PEP items — magenta crossover on light surface */ --pep-active-border: rgba(184, 16, 78, 0.30); --pep-active-bg: rgba(184, 16, 78, 0.06); --pep-active-text: var(--color-magenta-jewel); /* Network motif */ --network-node-color: var(--color-signal); --network-node-opacity: 0.30; --network-edge-opacity: 0.15; --network-node-size-min: 3px; --network-node-size-max: 8px; --network-edge-width: 0.5px; --network-drift-duration: var(--duration-network); /* Progress bar — M.O. interview */ --progress-completed: rgba(0, 229, 204, 0.70); /* teal — past-tense crossover */ --progress-approaching: var(--color-signal); --progress-current: var(--color-magenta-neon); /* Tags and chips */ --tag-radius: var(--radius-pill); --tag-font-size: var(--text-label); --tag-font-weight: var(--weight-medium); --tag-tracking: var(--tracking-label); /* Team Genome chips */ --genome-chip-size: 40px; --genome-chip-radius: var(--radius-full); --genome-chip-bg: var(--color-signal-deep); --genome-chip-text: var(--color-signal-glow); } /* ───────────────────────────────────────────────────────────────── * SURFACE OVERRIDES * Apply data-surface="discovery" or data-surface="enlightenment" * to any parent element — body, section, or layout wrapper. * Children that consume var(--surface-page), var(--accent-primary), * etc. will automatically resolve to the correct values. * ───────────────────────────────────────────────────────────────── */ [data-surface="discovery"] { --surface-page: var(--surface-discovery-page); --surface-card: var(--surface-discovery-card); --surface-border: var(--surface-discovery-border); --text-primary: var(--text-discovery-primary); --text-secondary: var(--text-discovery-secondary); --text-tertiary: var(--text-discovery-tertiary); --text-label: var(--text-discovery-label); --accent-primary: var(--color-magenta-neon); --accent-secondary:var(--color-teal-neon); --btn-primary-bg: var(--color-magenta-neon); --focus-ring: var(--focus-ring-discovery); background-color: var(--surface-discovery-page); color: var(--text-discovery-primary); } [data-surface="enlightenment"] { --surface-page: var(--surface-enlighten-page); --surface-card: var(--surface-enlighten-card); --surface-border: var(--surface-enlighten-border); --text-primary: var(--text-enlighten-primary); --text-secondary: var(--text-enlighten-secondary); --text-tertiary: var(--text-enlighten-tertiary); --text-label: var(--text-enlighten-label); --accent-primary: var(--color-teal-jewel); --accent-secondary:var(--color-magenta-jewel); --btn-primary-bg: var(--color-teal-jewel); --focus-ring: var(--focus-ring-enlighten); background-color: var(--surface-enlighten-page); color: var(--text-enlighten-primary); } /* ───────────────────────────────────────────────────────────────── * SURFACE FLIP TRANSITION * Applied to the root element during the M.O. → Profile transition. * Signal Violet elements must be excluded from this transition * via the .signal-anchor class — they do not move or fade. * ───────────────────────────────────────────────────────────────── */ .surface-transitioning { transition: background-color var(--duration-surface-flip) var(--ease-in-out), color var(--duration-surface-flip) var(--ease-in-out); } .surface-transitioning * { transition: background-color var(--duration-surface-flip) var(--ease-in-out), border-color var(--duration-surface-flip) var(--ease-in-out), color var(--duration-surface-flip) var(--ease-in-out), box-shadow var(--duration-surface-flip) var(--ease-in-out); } /* Signal anchor — these elements never transition during a surface flip */ .signal-anchor, .signal-anchor * { transition: none !important; } /* ───────────────────────────────────────────────────────────────── * TRAIT STAGGER * Apply .trait-item to each trait card in a Profile or PEP list. * The parent must have .traits-revealed added via JS to trigger. * nth-child delay creates the 80ms stagger — brand signature. * ───────────────────────────────────────────────────────────────── */ .trait-item { opacity: 0; transform: translateY(var(--reveal-offset-y)); } .traits-revealed .trait-item { opacity: 1; transform: translateY(0); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); } .traits-revealed .trait-item:nth-child(1) { transition-delay: calc(var(--duration-stagger) * 0); } .traits-revealed .trait-item:nth-child(2) { transition-delay: calc(var(--duration-stagger) * 1); } .traits-revealed .trait-item:nth-child(3) { transition-delay: calc(var(--duration-stagger) * 2); } .traits-revealed .trait-item:nth-child(4) { transition-delay: calc(var(--duration-stagger) * 3); } .traits-revealed .trait-item:nth-child(5) { transition-delay: calc(var(--duration-stagger) * 4); } .traits-revealed .trait-item:nth-child(6) { transition-delay: calc(var(--duration-stagger) * 5); } .traits-revealed .trait-item:nth-child(7) { transition-delay: calc(var(--duration-stagger) * 6); } .traits-revealed .trait-item:nth-child(8) { transition-delay: calc(var(--duration-stagger) * 7); } /* ───────────────────────────────────────────────────────────────── * SCROLL REVEAL * Apply .reveal to any element that should fade up on scroll. * Toggle .revealed via IntersectionObserver. * ───────────────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(var(--reveal-offset-y)); transition: opacity var(--duration-reveal) var(--ease-reveal), transform var(--duration-reveal) var(--ease-reveal); } .reveal.revealed { opacity: 1; transform: translateY(0); } /* ───────────────────────────────────────────────────────────────── * REDUCED MOTION * All animations and transitions disabled for users who prefer it. * ───────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .trait-item { opacity: 1; transform: none; } .reveal { opacity: 1; transform: none; } }