/* GENERATED — do not edit. * Source: docs/design/design-tokens.md (PROG-22), every ```css block, in order. * Regenerate: node build.js --sync-assets * * The --mk- prefix is not decoration: the Canvas application runs inside * Salesforce chrome beside SLDS's --lwc-* and --slds-* custom properties. * * The type FAMILY is deliberately unbound (DB-05). The scale, the leadings * and tabular figures are bound. Binding a family is one line — and it must * be SELF-HOSTED: 22-F8, a webfont CDN would falsify the trust page's * published "no font CDN" claim. */ :root { /* brand */ --mk-color-deep-ink: #0B1045; --mk-color-kraken-purple: #470FB1; --mk-color-pale-lavender: #A489DE; --mk-color-sea-teal: #166D92; --mk-color-mist-teal: #61B0C5; --mk-color-parchment: #E6DFD8; /* derived */ --mk-color-kraken-purple-light: #9564F2; --mk-color-sea-teal-light: #1C89B8; /* state */ --mk-color-error: #B3261E; --mk-color-warning: #8A5A00; --mk-color-success: #1E6B45; --mk-color-info: #2C5F8A; /* state on dark */ --mk-color-error-on-dark: #E87E78; --mk-color-warning-on-dark: #E69600; --mk-color-success-on-dark: #32B373; --mk-color-info-on-dark: #73A6D2; /* neutral ramp — derived from Deep Ink's hue, see build_ramp() */ --mk-color-n-000: #FFFFFF; /* page ground, light */ --mk-color-n-025: #F8F8FA; /* raised surface, subtle fill */ --mk-color-n-050: #EFF0F6; /* app chrome ground */ --mk-color-n-100: #E2E3EE; /* hairline / divider */ --mk-color-n-200: #CFD1E5; /* border, default */ --mk-color-n-300: #B6B9D8; /* border, strong / disabled fill */ --mk-color-n-400: #8D91C4; /* disabled text, placeholder */ --mk-color-n-500: #5A61AD; /* icon, secondary — the lightest step that is AA text on n-000 */ --mk-color-n-600: #474E94; /* body text, secondary */ --mk-color-n-700: #353B76; /* body text, default */ --mk-color-n-800: #242959; /* heading text */ --mk-color-n-900: #15193C; /* highest-contrast text */ --mk-color-n-950: #0C0E26; /* inverse surface */ } :root { /* families — DB-05. Do not ship these fallbacks as the decision. */ --mk-type-family-display: /* [UNKNOWN — blocked on H-05 DB-05] */ system-ui, sans-serif; --mk-type-family-text: /* [UNKNOWN — blocked on H-05 DB-05] */ system-ui, sans-serif; --mk-type-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* scale — a 1.200 minor third around a 16px body step, rounded to whole px. 16 · 1.2^n = 11.1 / 13.3 / 16 / 19.2 / 23.0 / 27.6 / 33.2 / 39.8 / 47.8 */ --mk-type-size-3xs: 11px; /* map labels, dense table meta */ --mk-type-size-2xs: 12px; /* captions, helper text — off-ratio, see below */ --mk-type-size-xs: 13px; /* dense UI, table cells */ --mk-type-size-sm: 14px; /* secondary body, form labels — off-ratio, see below */ --mk-type-size-md: 16px; /* body — the base step */ --mk-type-size-lg: 19px; /* lead paragraph, card title */ --mk-type-size-xl: 23px; /* h3 */ --mk-type-size-2xl: 28px; /* h2 */ --mk-type-size-3xl: 33px; /* h1 */ --mk-type-size-4xl: 40px; /* display — brand moments only */ --mk-type-size-5xl: 48px; /* hero */ --mk-type-leading-tight: 1.15; /* display and headings */ --mk-type-leading-snug: 1.35; /* UI, table rows */ --mk-type-leading-normal: 1.55; /* body copy */ --mk-type-leading-relaxed: 1.7; /* long-form documentation */ --mk-type-weight-regular: 400; --mk-type-weight-medium: 500; --mk-type-weight-semibold: 600; --mk-type-weight-bold: 700; --mk-type-tracking-tight: -0.01em; /* >=28px only */ --mk-type-tracking-normal: 0; --mk-type-tracking-wide: 0.04em; /* all-caps labels, <=12px */ /* tabular figures are NOT optional — DB-05's stated requirement, and this product renders tables of revenue and record counts */ --mk-type-numeric-tabular: tabular-nums; } :root { --mk-space-0: 0; --mk-space-1: 4px; --mk-space-2: 8px; --mk-space-3: 12px; --mk-space-4: 16px; --mk-space-5: 24px; --mk-space-6: 32px; --mk-space-7: 48px; --mk-space-8: 64px; --mk-space-9: 96px; --mk-radius-none: 0; --mk-radius-sm: 4px; /* inputs, chips, table affordances */ --mk-radius-md: 8px; /* buttons, cards */ --mk-radius-lg: 14px; /* panels, modals, map overlays */ --mk-radius-xl: 24px; /* app-icon plate at 128px */ --mk-radius-full: 9999px; /* pills, avatars */ /* Elevation is tinted with the brand hue rather than neutral black, so a raised surface belongs to the same system as the ramp above it. */ --mk-elevation-0: none; --mk-elevation-1: 0 1px 2px rgba(59, 42, 90, 0.08), 0 1px 1px rgba(59, 42, 90, 0.04); --mk-elevation-2: 0 2px 6px rgba(59, 42, 90, 0.10), 0 1px 2px rgba(59, 42, 90, 0.06); --mk-elevation-3: 0 8px 20px rgba(59, 42, 90, 0.12), 0 2px 6px rgba(59, 42, 90, 0.07); --mk-elevation-4: 0 18px 40px rgba(59, 42, 90, 0.16), 0 4px 12px rgba(59, 42, 90, 0.08); --mk-motion-fast: 120ms; /* hover, focus, press */ --mk-motion-base: 200ms; /* open, close, reveal */ --mk-motion-slow: 320ms; /* page and panel transitions */ --mk-motion-ease: cubic-bezier(0.2, 0, 0.2, 1); --mk-motion-ease-out: cubic-bezier(0, 0, 0.2, 1); --mk-motion-ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2); /* Focus is a token, not a per-component decision. 3:1 against both grounds. */ --mk-focus-ring: 0 0 0 2px var(--mk-color-n-000), 0 0 0 4px var(--mk-color-kraken-purple); --mk-focus-ring-on-dark: 0 0 0 2px var(--mk-color-n-950), 0 0 0 4px var(--mk-color-kraken-purple-light); } @media (prefers-reduced-motion: reduce) { :root { --mk-motion-fast: 0ms; --mk-motion-base: 0ms; --mk-motion-slow: 0ms; } } :root { --mk-surface-page: var(--mk-color-n-000); --mk-surface-raised: var(--mk-color-n-025); --mk-surface-chrome: var(--mk-color-n-050); --mk-surface-inverse: var(--mk-color-n-950); --mk-surface-brand: var(--mk-color-deep-ink); --mk-surface-parchment: var(--mk-color-parchment); --mk-text-primary: var(--mk-color-n-800); --mk-text-body: var(--mk-color-n-700); --mk-text-secondary: var(--mk-color-n-600); --mk-text-disabled: var(--mk-color-n-400); --mk-text-inverse: var(--mk-color-n-000); --mk-text-link: var(--mk-color-kraken-purple); --mk-border-subtle: var(--mk-color-n-100); --mk-border-default: var(--mk-color-n-200); --mk-border-strong: var(--mk-color-n-300); --mk-action-primary-bg: var(--mk-color-kraken-purple); --mk-action-primary-text: var(--mk-color-n-000); /* 6.40:1 — parchment is 4.99:1, also AA now */ --mk-action-secondary-bg: var(--mk-color-n-000); --mk-action-secondary-text: var(--mk-color-kraken-purple); }