/* =========================================================================== CIMA ADVISORS CPAs — Design Tokens Drop this file into the of any artifact: Then use the variables below. Both base tokens (--navy-900) and semantic tokens (--color-bg, --color-fg, h1/h2/body classes) are exposed. =========================================================================== */ /* Webfont substitution — see README "Typography". If licensed fonts arrive, swap @import for @font-face from fonts/. */ @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap"); :root { /* ---------- Color: brand ---------- */ --navy-950: #0A1535; /* footer bar, deepest surfaces */ --navy-900: #0D1B4B; /* primary headlines & backgrounds */ --navy-800: #142566; --blue-700: #1A3FA0; /* logo mark, secondary CTAs, subheadings */ --blue-600: #2563EB; /* primary CTA, callout icon circles, links */ --blue-500: #3B82F6; --blue-400: #60A5FA; /* mountain gradient accent */ --blue-200: #BFDBFE; --blue-100: #DBEAFE; --blue-50: #EFF4FE; /* ---------- Color: neutral ---------- */ --ink: #0F172A; /* body text on white */ --ink-soft: #334155; /* supporting copy */ --ink-muted: #64748B; --ink-faint: #94A3B8; --line: #E2E8F0; --line-soft: #EEF2F7; --surface: #FFFFFF; --surface-alt: #F4F6FB; --surface-tint: #F8FAFF; /* ---------- Color: with-alpha ink (for hairlines on imagery) ---------- */ --ink-10: rgba(15, 23, 42, 0.10); --ink-20: rgba(15, 23, 42, 0.20); --ink-60: rgba(15, 23, 42, 0.60); /* ---------- Color: semantic ---------- */ --color-bg: var(--surface); --color-bg-inverse: var(--navy-900); --color-fg: var(--ink); --color-fg-muted: var(--ink-soft); --color-fg-on-dark: #FFFFFF; --color-accent: var(--blue-600); --color-accent-deep: var(--blue-700); --color-link: var(--blue-600); --color-border: var(--line); /* ---------- Type: families ---------- */ --font-display: "Oswald", "Barlow Condensed", "Bebas Neue", system-ui, sans-serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---------- Type: scale (px) ---------- */ --fs-display-xl: 96px; /* poster headlines (S-CORP / LLC) */ --fs-display-lg: 72px; --fs-display-md: 56px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 15px; --fs-caption: 13px; --fs-eyebrow: 12px; /* ---------- Type: line-height ---------- */ --lh-tight: 1.05; /* @kind other */ --lh-snug: 1.20; /* @kind other */ --lh-normal: 1.45; /* @kind other */ --lh-loose: 1.65; /* @kind other */ /* ---------- Type: tracking ---------- */ --tr-tight: -0.01em; --tr-normal: 0em; --tr-eyebrow: 0.12em; --tr-caps: 0.04em; /* ---------- Spacing scale ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---------- Radius ---------- */ --radius-none: 0; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; /* ---------- Shadow ---------- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06); /* ---------- Motion ---------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --dur-micro: 150ms; /* @kind other */ --dur-layout: 250ms; /* @kind other */ } @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 0.01ms; /* @kind other */ --dur-layout: 0.01ms; /* @kind other */ } } /* ============================================================ Semantic typography utilities ============================================================ */ .t-eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--blue-700); } .t-poster { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); text-transform: uppercase; color: var(--navy-900); } .t-h1, h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--navy-900); margin: 0; } .t-h2, h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--navy-900); margin: 0; } .t-h3, h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--blue-700); margin: 0; } .t-subhead { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--blue-700); } .t-body, p { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ink); margin: 0; } .t-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--ink-soft); } .t-caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--ink-muted); } .t-callout-label { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-body-sm); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--blue-700); } /* ============================================================ Base reset (light — only used by preview/ and ui_kits/) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }