/* ============================================================ Metanoia — Design Token Barrel (flat, generated by build-tokens.js) All layers inlined — no @import chains. Served at /colors_and_type.css by Vercel for /preview/ and /legacy/. DO NOT HAND-EDIT — run: node sweden/engine/build-tokens.js ============================================================ */ /* ============================================================ Metanoia — Color Primitives Raw palette values only. No var() references. Source of truth: Metanoia Visual Identity Guide 2025 v1. Use semantic aliases (color-semantic.css) in components. ============================================================ */ :root { /* ── Brand ──────────────────────────────────────────────── */ --color-navy: #094B77; --color-aqua: #32CBED; --color-light-aqua: #9BEBF9; --color-white: #FFFFFF; --color-black: #000000; --color-grey: #999999; --color-dark-grey: #666666; /* ── Navy scale ─────────────────────────────────────────── */ --color-navy-900: #062F4A; --color-navy-700: #094B77; --color-navy-500: #1F6EA0; --color-navy-100: #DCEAF3; /* ── Aqua scale ─────────────────────────────────────────── */ --color-aqua-700: #1FA8C9; --color-aqua-500: #32CBED; --color-aqua-300: #62D9F3; --color-aqua-200: #BFF1FB; --color-aqua-50: #ECFAFD; /* ── Grey scale (cool, ~210° hue) ───────────────────────── */ --color-grey-900: #131A21; --color-grey-800: #232C35; --color-grey-700: #3A4754; --color-grey-600: #56636F; --color-grey-500: #6E7A86; --color-grey-400: #8C97A1; --color-grey-300: #B6BEC6; --color-grey-200: #D8DEE3; --color-grey-100: #ECEFF2; --color-grey-50: #F4F6F8; /* ── Status — base ──────────────────────────────────────── */ --color-success: #2E9E6E; --color-warning: #E9A23B; --color-error: #D6492F; --color-info: #7C5BD9; /* ── Success scale ──────────────────────────────────────── */ --color-success-200: #C8F0DF; --color-success-400: #6FCA9E; --color-success-600: #2E9E6E; --color-success-800: #1A6343; --color-success-1000: #0A2B1D; /* ── Warning scale ──────────────────────────────────────── */ --color-warning-200: #FDECD2; --color-warning-400: #F5C073; --color-warning-600: #E9A23B; --color-warning-800: #9E6A1D; --color-warning-1000: #3D280A; /* ── Error scale ────────────────────────────────────────── */ --color-error-50: #FFF2F0; --color-error-200: #FAD5CE; --color-error-400: #E98474; --color-error-600: #D6492F; --color-error-700: #B83C24; --color-error-800: #8F2D1C; --color-error-1000: #3A0F09; /* ── Info scale ─────────────────────────────────────────── */ --color-info-200: #E6E0FA; --color-info-400: #B09AEA; --color-info-600: #7C5BD9; --color-info-800: #4A30A8; --color-info-1000: #1E1242; } /* ============================================================ Metanoia — Color Semantic Aliases Role-based tokens that reference color-primitives.css. Always use these in components — never primitives directly. Dark mode: apply [data-theme="dark"] to . ============================================================ */ :root { /* ── Surfaces ───────────────────────────────────────────── */ --bg-canvas: var(--color-white); --bg-subtle: var(--color-grey-50); --bg-muted: var(--color-grey-100); --bg-accent-soft: var(--color-aqua-50); --bg-accent: var(--color-aqua); /* ── Foreground / text ──────────────────────────────────── */ --fg-1: var(--color-navy-900); --fg-2: var(--color-grey-800); --fg-3: var(--color-grey-600); --fg-4: var(--color-grey-400); --fg-link: var(--color-navy); --fg-link-hover: var(--color-aqua-700); --fg-accent: var(--color-aqua-700); /* ── Borders ────────────────────────────────────────────── */ --border-subtle: var(--color-grey-200); --border-default: var(--color-grey-300); --border-strong: var(--color-grey-600); --border-accent: var(--color-aqua); /* ── Logo ───────────────────────────────────────────────── */ --logo-accent: var(--color-aqua); --logo-mark: var(--color-navy-700); --logo-wordmark: var(--color-navy-700); /* ── Button — Primary ───────────────────────────────────── */ --btn-primary-bg: var(--color-navy-700); --btn-primary-bg-hover: var(--color-navy-500); --btn-primary-bg-active: var(--color-navy-900); --btn-primary-bg-disabled: var(--color-grey-50); --btn-primary-text: var(--color-white); --btn-primary-text-disabled:var(--color-grey-400); /* ── Button — Secondary ─────────────────────────────────── */ --btn-secondary-bg: var(--color-white); --btn-secondary-bg-hover: var(--color-navy-100); --btn-secondary-bg-active: var(--color-navy-100); --btn-secondary-bg-disabled: var(--color-white); --btn-secondary-text: var(--color-navy-900); --btn-secondary-text-disabled: var(--color-grey-400); --btn-secondary-border: var(--color-navy-700); --btn-secondary-border-hover: var(--color-navy-900); --btn-secondary-border-active: var(--color-navy-900); --btn-secondary-border-disabled: var(--color-grey-200); /* ── Button — Ghost ─────────────────────────────────────── */ --btn-ghost-bg-hover: var(--color-grey-100); --btn-ghost-bg-active: var(--color-grey-200); --btn-ghost-text: var(--color-navy-700); --btn-ghost-text-disabled: var(--color-grey-400); --btn-ghost-border: var(--color-grey-300); --btn-ghost-border-disabled: var(--color-grey-200); } [data-theme="dark"] { /* ── Surfaces ───────────────────────────────────────────── */ --bg-canvas: var(--color-grey-900); --bg-subtle: var(--color-navy-900); --bg-muted: var(--color-navy-700); --bg-accent-soft: rgba(50,203,237,0.12); --bg-accent: var(--color-aqua); /* ── Foreground / text ──────────────────────────────────── */ --fg-1: var(--color-white); --fg-2: rgba(255,255,255,0.88); --fg-3: rgba(255,255,255,0.72); --fg-4: rgba(255,255,255,0.48); --fg-link: var(--color-light-aqua); --fg-link-hover: var(--color-aqua); --fg-accent: var(--color-aqua-300); /* ── Borders ────────────────────────────────────────────── */ --border-subtle: rgba(255,255,255,0.1); --border-default: var(--color-grey-700); --border-strong: var(--color-grey-400); --border-accent: var(--color-aqua); /* ── Logo ───────────────────────────────────────────────── */ --logo-accent: var(--color-aqua); --logo-mark: var(--color-white); --logo-wordmark: var(--color-white); /* ── Button — Primary ───────────────────────────────────── */ --btn-primary-bg: var(--color-navy-500); --btn-primary-bg-hover: var(--color-aqua-700); --btn-primary-bg-active: var(--color-navy-700); --btn-primary-bg-disabled: var(--color-navy-900); --btn-primary-text: var(--color-white); --btn-primary-text-disabled:#42677F; /* ── Button — Secondary ─────────────────────────────────── */ --btn-secondary-bg: var(--color-grey-800); --btn-secondary-bg-hover: var(--color-navy-900); --btn-secondary-bg-active: var(--color-navy-700); --btn-secondary-bg-disabled: var(--color-grey-800); --btn-secondary-text: var(--color-white); --btn-secondary-text-disabled: #3D6986; --btn-secondary-border: var(--color-navy-500); --btn-secondary-border-hover: var(--color-aqua-700); --btn-secondary-border-active: var(--color-aqua-500); --btn-secondary-border-disabled: var(--color-navy-700); /* ── Button — Ghost ─────────────────────────────────────── */ --btn-ghost-bg-hover: var(--color-navy-900); --btn-ghost-bg-active: var(--color-navy-900); --btn-ghost-text: var(--color-white); --btn-ghost-text-disabled: #3D6986; --btn-ghost-border: var(--color-navy-700); --btn-ghost-border-disabled: var(--color-navy-700); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-canvas: var(--color-grey-900); --bg-subtle: var(--color-navy-900); --bg-muted: var(--color-navy-700); --bg-accent-soft: rgba(50,203,237,0.12); --bg-accent: var(--color-aqua); --fg-1: var(--color-white); --fg-2: rgba(255,255,255,0.88); --fg-3: rgba(255,255,255,0.72); --fg-4: rgba(255,255,255,0.48); --fg-link: var(--color-light-aqua); --fg-link-hover: var(--color-aqua); --fg-accent: var(--color-aqua-300); --border-subtle: rgba(255,255,255,0.1); --border-default: var(--color-grey-700); --border-strong: var(--color-grey-400); --border-accent: var(--color-aqua); --logo-accent: var(--color-aqua); --logo-mark: var(--color-white); --logo-wordmark: var(--color-white); --btn-primary-bg: var(--color-navy-500); --btn-primary-bg-hover: var(--color-aqua-700); --btn-primary-bg-active: var(--color-navy-700); --btn-primary-bg-disabled: var(--color-navy-900); --btn-primary-text: var(--color-white); --btn-primary-text-disabled:#42677F; --btn-secondary-bg: var(--color-grey-800); --btn-secondary-bg-hover: var(--color-navy-900); --btn-secondary-bg-active: var(--color-navy-700); --btn-secondary-bg-disabled: var(--color-grey-800); --btn-secondary-text: var(--color-white); --btn-secondary-text-disabled: #3D6986; --btn-secondary-border: var(--color-navy-500); --btn-secondary-border-hover: var(--color-aqua-700); --btn-secondary-border-active: var(--color-aqua-500); --btn-secondary-border-disabled: var(--color-navy-700); --btn-ghost-bg-hover: var(--color-navy-900); --btn-ghost-bg-active: var(--color-navy-900); --btn-ghost-text: var(--color-white); --btn-ghost-text-disabled: #3D6986; --btn-ghost-border: var(--color-navy-700); --btn-ghost-border-disabled: var(--color-navy-700); } } /* ============================================================ Metanoia — Typography Tokens Families, weights, size scale, line-heights, letter-spacing. Utility classes live in styles/typography-utilities.css. ============================================================ */ :root { /* ── Families ────────────────────────────────────────────── */ --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-brand: var(--font-sans); /* ── Weights (Figtree variable 300–900) ─────────────────── */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Size scale (1.250 major-third, UI-first) ───────────── */ --fs-12: 0.75rem; /* 12 — micro */ --fs-13: 0.8125rem; /* 13 — caption */ --fs-14: 0.875rem; /* 14 — small */ --fs-15: 0.9375rem; --fs-16: 1rem; /* 16 — body */ --fs-18: 1.125rem; /* 18 — body large / subheading */ --fs-20: 1.25rem; --fs-22: 1.375rem; --fs-24: 1.5rem; /* 24 — h4 */ --fs-28: 1.75rem; /* 28 — h3 */ --fs-32: 2rem; --fs-36: 2.25rem; /* 36 — h2 */ --fs-44: 2.75rem; --fs-56: 3.5rem; /* 56 — h1 */ --fs-72: 4.5rem; /* 72 — display */ --fs-96: 6rem; /* 96 — hero display */ --fs-120: 7.5rem; /* 120 — display XL */ /* ── Line heights ────────────────────────────────────────── */ --lh-display: 0.95; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6; /* ── Letter spacing ──────────────────────────────────────── */ --ls-display: -0.035em; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-loose: 0.04em; --ls-wide: 0.12em; } /* ============================================================ Metanoia — Spacing, Shape & Shadow Tokens 4px space scale, border radii, elevation shadows, and layout container widths. ============================================================ */ :root { /* ── Space scale (4px base) ─────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ── Radii ───────────────────────────────────────────────── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 999px; /* ── Shadows ─────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(9,75,119,0.06); --shadow-sm: 0 2px 4px rgba(9,75,119,0.08), 0 1px 2px rgba(9,75,119,0.04); --shadow-md: 0 6px 14px rgba(9,75,119,0.10), 0 2px 4px rgba(9,75,119,0.06); --shadow-lg: 0 16px 32px rgba(9,75,119,0.12), 0 4px 8px rgba(9,75,119,0.06); --shadow-xl: 0 28px 56px rgba(9,75,119,0.18), 0 8px 16px rgba(9,75,119,0.08); --shadow-focus: 0 0 0 3px rgba(50,203,237,0.45); /* ── Layout ──────────────────────────────────────────────── */ --container-narrow: 720px; --container-default: 1120px; --container-wide: 1440px; /* ── Icon stroke weight (unitless — SVG stroke-width) ────── */ --icon-stroke-sm: 2; --icon-stroke-md: 2; --icon-stroke-lg: 2; /* ── Border widths ───────────────────────────────────────── */ --border-thin: 0.5px; --border-regular: 1px; --border-thick: 2px; --border-bar: 12px; } /* ============================================================ Metanoia — Motion Tokens Easing curves and duration tiers. 120–200–320ms; no bounces or spring overshoots. ============================================================ */ :root { /* ── Easing ──────────────────────────────────────────────── */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2); --ease-out: cubic-bezier(0, 0, 0, 1); /* ── Duration ────────────────────────────────────────────── */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* ============================================================ Metanoia — Typography Utilities @font-face declarations, semantic type-role classes, and the .metanoia-typography content wrapper. Not tokens — do not include in Figma variable sync. ============================================================ */ @font-face { font-family: "Figtree"; src: url("./fonts/Figtree-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("./fonts/Figtree-Italic-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 300 900; font-style: italic; font-display: swap; } /* ── Semantic type-role classes ─────────────────────────────── */ .t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-eyebrow, .t-lead, .t-body, .t-body-sm, .t-caption, .t-mono, .t-wordmark { font-family: var(--font-sans); color: var(--fg-1); } .t-display { font-size: var(--fs-120); font-weight: var(--fw-semibold); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance; } .t-h1 { font-size: var(--fs-56); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; } .t-h2 { font-size: var(--fs-36); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); text-wrap: balance; } .t-h3 { font-size: var(--fs-28); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); text-wrap: balance; } .t-h4 { font-size: var(--fs-22); font-weight: var(--fw-semibold); line-height: var(--lh-snug); text-wrap: balance; } .t-h5 { font-size: var(--fs-18); font-weight: var(--fw-semibold); line-height: var(--lh-snug); text-wrap: balance; } .t-lead { font-size: var(--fs-20); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; } .t-body { font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; } .t-eyebrow { font-size: var(--fs-13); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-3); } .t-body-sm { font-size: var(--fs-14); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg-2); } .t-caption { font-size: var(--fs-12); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg-3); } .t-mono { font-family: var(--font-mono); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-2); } /* Wordmark is ALWAYS lowercase, heavy Figtree, tight tracking. */ .t-wordmark { font-family: var(--font-sans); font-weight: var(--fw-bold); text-transform: lowercase; letter-spacing: var(--ls-tight); line-height: 1; color: var(--color-navy); } /* ── Content wrapper ────────────────────────────────────────── */ .metanoia-typography { font-family: var(--font-sans); color: var(--fg-2); font-size: var(--fs-16); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .metanoia-typography h1 { font-size: var(--fs-56); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); text-wrap: balance; } .metanoia-typography h2 { font-size: var(--fs-36); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--fg-1); text-wrap: balance; } .metanoia-typography h3 { font-size: var(--fs-28); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-1); text-wrap: balance; } .metanoia-typography h4 { font-size: var(--fs-22); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-1); text-wrap: balance; } .metanoia-typography p { margin: 0 0 var(--space-4); text-wrap: pretty; } .metanoia-typography a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 2px; } .metanoia-typography a:hover { color: var(--fg-link-hover); } .metanoia-typography code, .metanoia-typography pre { font-family: var(--font-mono); } /* ============================================================ Metanoia — Icon Component .ds-icon wraps a Lucide element. Lucide replaces with ; this stylesheet governs sizing and ensures 2px stroke / currentColor / never filled. Usage: Sizes: --sm (16px) · --md (20px, default) · --lg (24px) ============================================================ */ .ds-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; color: inherit; } .ds-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: var(--icon-stroke-md); stroke-linecap: round; stroke-linejoin: round; fill: none; } .ds-icon--sm { width: 16px; height: 16px; } .ds-icon--sm svg { stroke-width: var(--icon-stroke-sm); } .ds-icon--md { width: 20px; height: 20px; } .ds-icon--lg { width: 24px; height: 24px; } .ds-icon--lg svg { stroke-width: var(--icon-stroke-lg); } /* ============================================================ Metanoia — Layout Utilities Structural shells for containers and page sections. Not sync-eligible (code-only, like typography-utilities.css). ============================================================ */ /* ── Containers ──────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-default); /* 1120px */ margin-inline: auto; padding-inline: var(--space-6); /* 24px */ } .container--narrow { max-width: var(--container-narrow); /* 720px */ } .container--wide { max-width: var(--container-wide); /* 1440px */ } @media (max-width: 600px) { .container, .container--narrow, .container--wide { padding-inline: var(--space-5); /* 20px */ } } /* ── Section shells ──────────────────────────────────────── */ .section { padding-block: var(--space-24); } /* 96px */ .section--sm { padding-block: var(--space-12); } /* 48px */ .section--lg { padding-block: var(--space-32); } /* 128px */ .section--alt { background: var(--bg-subtle); } .section--muted { background: var(--bg-muted); } /* Dark section: apply data-theme="dark" to the element so all semantic tokens (--fg-*, --border-*) auto-flip to dark values. */ .section--dark { background: var(--color-navy); } /* ============================================================ Metanoia — Component Classes CSS output layer for DS components. Consumes semantic tokens from color-semantic.css. Not sync-eligible (code-only). Grow this file per phase: Phase 3a — Buttons (below) Phase 4 — Tags, Inputs (add here or split into components/) Phase 5 — Nav, Modal, Hero (add here or split) ============================================================ */ /* ══════════════════════════════════════════════════════════ BUTTONS All token bindings live in tokens/color-semantic.css. Three variants × three sizes × all interactive states. ══════════════════════════════════════════════════════════ */ /* ── Base ────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-14); line-height: var(--lh-normal); letter-spacing: var(--ls-loose); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); /* md size (default) */ padding: var(--space-3) var(--space-5); } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; } /* ── Sizes ───────────────────────────────────────────────── */ .btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-13); } .btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--fs-16); } /* Icon-only square sizes */ .btn--icon-sm { padding: var(--space-2); } .btn--icon-md { padding: var(--space-3); } .btn--icon-lg { padding: var(--space-4); } /* ── Primary ─────────────────────────────────────────────── */ .btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); } .btn--primary:hover { background: var(--btn-primary-bg-hover); } .btn--primary:active { background: var(--btn-primary-bg-active); } .btn--primary:disabled, .btn--primary[aria-disabled="true"] { background: var(--btn-primary-bg-disabled); color: var(--btn-primary-text-disabled); } /* ── Secondary ───────────────────────────────────────────── */ .btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); } .btn--secondary:hover { background: var(--btn-secondary-bg-hover); border-color: var(--btn-secondary-border-hover); } .btn--secondary:active { background: var(--btn-secondary-bg-active); border-color: var(--btn-secondary-border-active); } .btn--secondary:disabled, .btn--secondary[aria-disabled="true"] { background: var(--btn-secondary-bg-disabled); color: var(--btn-secondary-text-disabled); border-color: var(--btn-secondary-border-disabled); } /* ── Ghost ───────────────────────────────────────────────── */ .btn--ghost { background: transparent; color: var(--btn-ghost-text); border-color: var(--btn-ghost-border); } .btn--ghost:hover { background: var(--btn-ghost-bg-hover); } .btn--ghost:active { background: var(--btn-ghost-bg-active); } .btn--ghost:disabled, .btn--ghost[aria-disabled="true"] { color: var(--btn-ghost-text-disabled); border-color: var(--btn-ghost-border-disabled); }