/* Mike Bravo Consulting design tokens, generated from tokens.json (brand system v4.4). Do not edit values here by hand: change tokens.json in the brand system and regenerate. Light theme is the default. Dark theme applies when the device prefers dark and the page has not forced light, or when is set. */ @import url("../fonts/fonts.9f62ef3192e0.css"); :root { color-scheme: light; --font-sans: "IBM Plex Sans", Arial, "Helvetica Neue", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --olive: #465933; --brand-olive: #465933; --olive-strong: #34431f; --olive-soft: #e4e8d6; --on-olive: #f9f6eb; --cream: #f9f6eb; --sage: #738061; --surface: #f9f6eb; --surface-raised: #ffffff; --surface-sunken: #efecdf; --ink: #1e2417; --ink-muted: #555c4a; --line: #d7d9c9; --line-strong: #7f8a6c; --focus: var(--olive); --danger: #9c3b1c; --danger-soft: #f6e3da; --warning: #7a5a10; --warning-soft: #f3ead0; --info: #2f5a78; --info-soft: #dfe9ef; --link: var(--olive); --success: var(--olive); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --radius-none: 0px; --radius-sm: 2px; --radius-md: 4px; --shadow-raised: 0 1px 2px rgba(30,36,23,0.08), 0 2px 8px rgba(30,36,23,0.06); --motion-fast: 150ms; --motion-base: 200ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --content-max: 1120px; --tap-min: 44px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --olive: #a9bc8c; --brand-olive: #465933; --olive-strong: #c3d2a9; --olive-soft: #2b3521; --on-olive: #171b13; --cream: #f9f6eb; --sage: #8c9a78; --surface: #171b13; --surface-raised: #20261a; --surface-sunken: #11140e; --ink: #f9f6eb; --ink-muted: #b6bba6; --line: #343c2a; --line-strong: #6b7a57; --focus: var(--olive); --danger: #f0a184; --danger-soft: #3b2016; --warning: #e2c36e; --warning-soft: #352b12; --info: #9cc3dd; --info-soft: #172a37; --shadow-raised: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); } } :root[data-theme="dark"] { color-scheme: dark; --olive: #a9bc8c; --brand-olive: #465933; --olive-strong: #c3d2a9; --olive-soft: #2b3521; --on-olive: #171b13; --cream: #f9f6eb; --sage: #8c9a78; --surface: #171b13; --surface-raised: #20261a; --surface-sunken: #11140e; --ink: #f9f6eb; --ink-muted: #b6bba6; --line: #343c2a; --line-strong: #6b7a57; --focus: var(--olive); --danger: #f0a184; --danger-soft: #3b2016; --warning: #e2c36e; --warning-soft: #352b12; --info: #9cc3dd; --info-soft: #172a37; --shadow-raised: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3); } /* Type styles */ .mbc-display { font-family: var(--font-sans); font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.01em; } .mbc-h1 { font-family: var(--font-sans); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.005em; } .mbc-h2 { font-family: var(--font-sans); font-size: 28px; line-height: 36px; font-weight: 500; } .mbc-h3 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 500; } .mbc-body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; } .mbc-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; } .mbc-small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; } .mbc-label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; } .mbc-eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } @media (max-width: 479px) { .mbc-display { font-size: 36px; line-height: 40px; } .mbc-h1 { font-size: 28px; line-height: 34px; } .mbc-h2 { font-size: 22px; line-height: 28px; } .mbc-h3 { font-size: 18px; line-height: 24px; } } /* Base */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }