/* ============================================================ ZEVULON MISSION — Design Tokens Colors + Typography foundations Family office · private wealth · stewardship ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* --------------------------------------------------------- BRAND — Zevulon Blue (primary) Core mark color sampled from the wordmark: #006898 --------------------------------------------------------- */ --blue-900: #042F44; /* deep ink-blue */ --blue-800: #0A4A66; --blue-700: #005B85; --blue-600: #006898; /* ◆ CORE BRAND BLUE — "ZEVULON" */ --blue-500: #1A7FAE; --blue-400: #4D9DC4; --blue-300: #8FC1DA; --blue-200: #C2DEEC; --blue-100: #E6F1F7; --blue-50: #F2F8FB; /* --------------------------------------------------------- BRAND — Mission Green (secondary / accent) Sampled from the wordmark: #78B080 --------------------------------------------------------- */ --green-700: #4F7E57; --green-600: #5F9268; --green-500: #78B080; /* ◆ CORE BRAND GREEN — "MISSION" */ --green-400: #97C49D; --green-300: #B8D7BC; --green-200: #D6E8D8; --green-100: #EAF3EB; --green-50: #F4F9F5; /* --------------------------------------------------------- ACCENT — Brass (used sparingly: legacy / distinction) --------------------------------------------------------- */ --brass-600: #9B7836; --brass-500: #B08A46; --brass-200: #E7D9BC; --brass-50: #F7F1E3; /* --------------------------------------------------------- NEUTRALS — cool, lightly blue-tinted ink & paper --------------------------------------------------------- */ --ink-900: #0C2734; /* deep surface (hero / footer) */ --ink-800: #122A38; /* primary text */ --ink-600: #3D5563; /* secondary text */ --ink-400: #6B818D; /* muted / captions */ --ink-300: #9CACB5; /* disabled / placeholder */ --line: #DCE5EA; /* hairline borders */ --line-soft:#E9EFF2; --paper-3: #ECF1F3; --paper-2: #F6F8F9; --paper-1: #FFFFFF; /* --------------------------------------------------------- SEMANTIC COLOR ROLES --------------------------------------------------------- */ --fg-1: var(--ink-800); /* primary foreground */ --fg-2: var(--ink-600); /* secondary foreground */ --fg-3: var(--ink-400); /* muted foreground */ --fg-on-dark: #EAF2F6; --fg-on-dark-2: #9FB8C4; --bg-1: var(--paper-1); --bg-2: var(--paper-2); --bg-3: var(--paper-3); --bg-dark: var(--ink-900); --primary: var(--blue-600); --primary-hover: var(--blue-700); --primary-press: var(--blue-800); --primary-weak: var(--blue-100); --on-primary: #FFFFFF; --accent: var(--green-500); --accent-hover: var(--green-600); --accent-weak: var(--green-100); --success: #4F7E57; --success-weak: var(--green-100); --warning: var(--brass-500); --warning-weak: var(--brass-50); --danger: #B4453C; --danger-weak: #F6E7E5; --info: var(--blue-600); --focus-ring: rgba(0,104,152,0.35); /* --------------------------------------------------------- TYPEFACES Display "Chakra Petch" matches the wordmark's squared, monoline forms and its chamfered (angled-cut) terminals. IBM Plex family carries body, data, and editorial voice. --------------------------------------------------------- */ --font-display: 'Chakra Petch', 'Arial Narrow', system-ui, sans-serif; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-serif: 'IBM Plex Serif', Georgia, serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; /* --------------------------------------------------------- TYPE SCALE (px) --------------------------------------------------------- */ --fs-display-xl: 64px; --fs-display-l: 48px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-overline: 12px; --lh-tight: 1.08; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-display: -0.01em; --tracking-tight: -0.005em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-overline: 0.18em; /* echoes the spaced "M I S S I O N" */ /* --------------------------------------------------------- SPACING (4px base) --------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* --------------------------------------------------------- RADII — restrained, squared to match the mark --------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-pill: 999px; /* --------------------------------------------------------- ELEVATION — subtle, cool-tinted --------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(12,39,52,0.06); --shadow-sm: 0 1px 3px rgba(12,39,52,0.08), 0 1px 2px rgba(12,39,52,0.04); --shadow-md: 0 4px 12px rgba(12,39,52,0.08); --shadow-lg: 0 12px 32px rgba(12,39,52,0.12); --shadow-xl: 0 24px 60px rgba(12,39,52,0.16); /* --------------------------------------------------------- MOTION --------------------------------------------------------- */ --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; --maxw-prose: 68ch; --maxw-page: 1200px; } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .t-overline { font-family: var(--font-sans); font-size: var(--fs-overline); font-weight: 600; letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--fg-3); } .t-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--fg-1); } .t-display-l { font-family: var(--font-display); font-size: var(--fs-display-l); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--fg-1); } .t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); color: var(--fg-1); } .t-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); color: var(--fg-1); } .t-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); color: var(--fg-1); } .t-lead { font-family: var(--font-serif); font-size: var(--fs-body-lg); font-weight: 400; line-height: var(--lh-relaxed); color: var(--fg-2); } .t-body { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-normal); color: var(--fg-1); } .t-body-sm { font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: 400; line-height: var(--lh-normal); color: var(--fg-2); } .t-caption { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 400; line-height: var(--lh-normal); color: var(--fg-3); } .t-data { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-quote { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-h3); font-weight: 400; line-height: var(--lh-relaxed); color: var(--fg-1); }