/* ==== Brand tokens: copied unchanged from brand/v5/tokens/mbc-tokens-v5.css ==== */
/* Mike Bravo Consulting · Brand system 5.0 · Evergreen
   Released 3 October 2026 · built on brand kit v4.4

   Tagline: "Your business isn't a template."
   The asterisk (web, LinkedIn, slides and social only): "*This [thing] is. Your plan won't be."

   Color: every value in this file already exists in kit v4.4 tokens.json.
   No locked value is changed and no hue or neutral is added. What is new is
   the roles: white leads light pages, the kit's near-blacks become grounds in
   both themes ("night"), olive-strong becomes the deep green, gold #E2C36E is
   the sparing highlight for next steps, and three gradients blend only kit values.

   Type: IBM Plex Sans (MBC's voice) and IBM Plex Serif italic (the client's
   own words). Both SIL Open Font License 1.1, free for commercial use.
   IBM Plex Mono only for code and file names.

   Light is the default. Dark applies when the device prefers dark and the page
   has not forced light, or when <html data-theme="dark"> is set. Night and deep
   green panels look the same in both themes. Documents and print are light only. */

:root {
  color-scheme: light;

  /* Locked brand colors: identical in both themes, never edited */
  --mbc-olive: #465933;            /* RGB 70 89 51 */
  --mbc-cream: #f9f6eb;            /* RGB 249 246 235 */
  --mbc-ink: #1e2417;              /* RGB 30 36 23 */

  /* Fixed palette roles, the same in both themes */
  --night: #11140e;                /* the black: hero panels, proof bands, footer */
  --night-2: #171b13;              /* gradient step, dark cards on night */
  --night-raised: #20261a;         /* cards and inputs placed on night */
  --night-line: #343c2a;           /* hairlines on night */
  --night-soft: #2b3521;           /* tinted wells on night */
  --on-night: #f9f6eb;             /* cream type on night, 17.17:1 */
  --on-night-muted: #b6bba6;       /* secondary type on night, 9.42:1 */
  --on-evergreen-muted: #e4e8d6;   /* secondary type on evergreen panels: 6.14:1 even at the olive corner */
  --accent: #a9bc8c;               /* stop, links, rise bars and buttons on night */
  --accent-strong: #c3d2a9;        /* hover of accent */
  --deep: #34431f;                 /* the deep green: feature panels, CTA bands */
  --on-deep: #f9f6eb;              /* cream on deep green, 9.86:1 */
  --on-deep-muted: #e4e8d6;        /* secondary type on deep green, 8.54:1 */
  --brand-olive: #465933;          /* logo grounds and the glow, both themes */

  /* Theme roles, light values */
  --surface: #ffffff;              /* page ground: white leads */
  --surface-soft: #f9f6eb;         /* cream sections, quote cards, document trim */
  --surface-sunken: #efecdf;       /* wells, code, disabled fills */
  --surface-raised: #ffffff;       /* cards and inputs */
  --text: #1e2417;                 /* ink, 15.91:1 on white */
  --text-muted: #555c4a;           /* 6.96:1 on white */
  --action: #465933;               /* primary buttons, links, active states */
  --action-hover: #34431f;
  --on-action: #f9f6eb;            /* 7.09:1 on olive */
  --action-soft: #e4e8d6;          /* secondary fills, decision callouts, selected rows */
  --on-action-soft: #34431f;       /* 8.54:1 on olive-soft */
  --stop: #465933;                 /* the full stop at the end of a headline */
  --border: #d7d9c9;               /* hairlines, card borders */
  --border-strong: #7f8a6c;        /* input and control borders, never text */
  --sage: #738061;                 /* chart secondary series, never text */
  --focus: #465933;
  --danger: #9c3b1c;
  --danger-soft: #f6e3da;
  --warning: #7a5a10;
  --warning-soft: #f3ead0;
  --info: #2f5a78;
  --info-soft: #dfe9ef;
  --success: #465933;

  /* Highlights: sparing, for action items and the one thing to notice */
  --signal: #e2c36e;               /* kit warning, dark value: the highlighter gold */
  --on-signal: #1e2417;            /* ink on signal gold, 9.29:1 */
  --signal-text: #1e2417;          /* highlighted words keep ink on light grounds */
  --signal-mark: #e2c36e;          /* marker stroke behind the words */
  --leaf: #a9bc8c;                 /* done, progress, live; kit dark olive */
  --leaf-strong: #465933;          /* check marks and progress fills on light */

  /* Gradients: kit values only */
  --gradient-evergreen: radial-gradient(120% 130% at 100% 100%, #465933 0%, #34431f 28%, #171b13 64%, #11140e 100%);
  --gradient-deep: linear-gradient(160deg, #465933 0%, #34431f 100%);
  --gradient-night: linear-gradient(180deg, #171b13 0%, #11140e 100%);
  --duotone-shadow: #11140e;       /* photos that carry type: night to cream */
  --duotone-highlight: #f9f6eb;

  /* Type families */
  --font-sans: "IBM Plex Sans", Arial, "Helvetica Neue", sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", Consolas, Menlo, ui-monospace, monospace;

  /* Type scale: fluid from phone (about 400px) to desktop (1440px) */
  --text-hero: clamp(3rem, 1.85rem + 4.6vw, 6.5rem);          /* 48 to 104px */
  --leading-hero: 0.98;
  --tracking-hero: -0.04em;
  --text-display: clamp(2.5rem, 1.95rem + 2.2vw, 4rem);       /* 40 to 64px */
  --leading-display: 1.04;
  --tracking-display: -0.035em;
  --text-h1: clamp(2rem, 1.6rem + 1.6vw, 3rem);               /* 32 to 48px */
  --leading-h1: 1.1;
  --tracking-h1: -0.03em;
  --text-h2: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);             /* 24 to 32px */
  --leading-h2: 1.2;
  --tracking-h2: -0.02em;
  --text-h3: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);     /* 19 to 22px */
  --leading-h3: 1.3;
  --tracking-h3: -0.01em;
  --text-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);   /* 18 to 21px */
  --leading-lead: 1.5;
  --text-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);      /* 16 to 17px */
  --leading-body: 1.6;
  --text-small: 0.875rem;                                     /* 14px */
  --leading-small: 1.55;
  --text-label: 0.875rem;                                     /* 14px, weight 500 */
  --text-eyebrow: 0.875rem;                                   /* 14px, 500, sentence case, olive */
  --text-pill: 0.8125rem;                                     /* 13px, 500, sentence case */
  --text-caption: 0.8125rem;                                  /* 13px */
  --text-quote: clamp(1.375rem, 1.17rem + 0.85vw, 1.75rem);   /* 22 to 28px Plex Serif italic */
  --leading-quote: 1.35;
  --text-stat: clamp(2.75rem, 2.3rem + 1.8vw, 3.5rem);        /* 44 to 56px */
  --tracking-stat: -0.035em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;          /* the heaviest weight; never 700 */

  /* Spacing: 4px base */
  --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;
  --section-y: clamp(64px, 9vw, 128px);

  /* Layout */
  --page-max: 1440px;
  --content-max: 1200px;
  --measure: 680px;                /* about 66 characters at 17px */
  --margin: clamp(20px, 4.4vw, 64px);
  --gutter: clamp(16px, 1.7vw, 24px);
  --panel-inset: clamp(8px, 1.1vw, 16px);   /* hero and band panels float this far from the window edge */
  --columns: 12;
  --header-height: 72px;
  --tap-min: 44px;

  /* Shape: soft, never bubbly */
  --radius-xs: 6px;                /* checkboxes, small chips inside tables */
  --radius-sm: 10px;               /* inputs, selects, code */
  --radius-md: 16px;               /* cards, images, tables */
  --radius-lg: 24px;               /* callouts, feature panels, testimonials */
  --radius-xl: 32px;               /* hero panels and screen covers */
  --radius-pill: 999px;            /* buttons, evidence pills, nav, chips */
  --border-hair: 1px solid var(--border);
  --border-control: 1px solid var(--border-strong);

  /* Depth: one line plus soft shadow, from the kit's ink-at-alpha recipe */
  --shadow-raised: 0 1px 2px rgba(30, 36, 23, 0.08), 0 2px 8px rgba(30, 36, 23, 0.06);   /* kit value */
  --shadow-lift: 0 1px 2px rgba(30, 36, 23, 0.06), 0 12px 32px rgba(30, 36, 23, 0.10);   /* hover and menus */

  /* Motion */
  --duration-micro: 120ms;         /* hover, press, color */
  --duration-base: 200ms;          /* menus, the logo fade-in */
  --duration-enter: 320ms;         /* content entering */
  --duration-exit: 160ms;          /* anything leaving */
  --duration-rise: 640ms;          /* the signature rise, once per visit */
  --stagger-rise: 110ms;
  --ease-settle: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --enter-distance: 12px;          /* content fades up 12px into place */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #171b13;
    --surface-soft: #20261a;
    --surface-sunken: #11140e;
    --surface-raised: #20261a;
    --text: #f9f6eb;
    --text-muted: #b6bba6;
    --action: #a9bc8c;
    --action-hover: #c3d2a9;
    --on-action: #171b13;
    --action-soft: #2b3521;
    --on-action-soft: #c3d2a9;
    --stop: #a9bc8c;
    --border: #343c2a;
    --border-strong: #6b7a57;
    --sage: #8c9a78;
    --focus: #a9bc8c;
    --danger: #f0a184;
    --danger-soft: #3b2016;
    --warning: #e2c36e;
    --warning-soft: #352b12;
    --info: #9cc3dd;
    --info-soft: #172a37;
    --success: #a9bc8c;
    --signal-text: #e2c36e;        /* on dark pages the words turn gold, 10.2:1 on #171b13 */
    --signal-mark: transparent;
    --leaf-strong: #a9bc8c;
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #171b13;
  --surface-soft: #20261a;
  --surface-sunken: #11140e;
  --surface-raised: #20261a;
  --text: #f9f6eb;
  --text-muted: #b6bba6;
  --action: #a9bc8c;
  --action-hover: #c3d2a9;
  --on-action: #171b13;
  --action-soft: #2b3521;
  --on-action-soft: #c3d2a9;
  --stop: #a9bc8c;
  --border: #343c2a;
  --border-strong: #6b7a57;
  --sage: #8c9a78;
  --focus: #a9bc8c;
  --danger: #f0a184;
  --danger-soft: #3b2016;
  --warning: #e2c36e;
  --warning-soft: #352b12;
  --info: #9cc3dd;
  --info-soft: #172a37;
  --success: #a9bc8c;
  --signal-text: #e2c36e;    /* on dark pages the words turn gold, 10.2:1 on #171b13 */
  --signal-mark: transparent;
  --leaf-strong: #a9bc8c;
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
}

/* Type utilities */
.mbc-hero { font: var(--weight-semibold) var(--text-hero)/var(--leading-hero) var(--font-sans); letter-spacing: var(--tracking-hero); text-wrap: balance; }
.mbc-display { font: var(--weight-semibold) var(--text-display)/var(--leading-display) var(--font-sans); letter-spacing: var(--tracking-display); text-wrap: balance; }
.mbc-h1 { font: var(--weight-semibold) var(--text-h1)/var(--leading-h1) var(--font-sans); letter-spacing: var(--tracking-h1); text-wrap: balance; }
.mbc-h2 { font: var(--weight-medium) var(--text-h2)/var(--leading-h2) var(--font-sans); letter-spacing: var(--tracking-h2); text-wrap: balance; }
.mbc-h3 { font: var(--weight-medium) var(--text-h3)/var(--leading-h3) var(--font-sans); letter-spacing: var(--tracking-h3); }
.mbc-lead { font: var(--weight-regular) var(--text-lead)/var(--leading-lead) var(--font-sans); }
.mbc-body { font: var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans); }
.mbc-small { font: var(--weight-regular) var(--text-small)/var(--leading-small) var(--font-sans); }
.mbc-label { font: var(--weight-medium) var(--text-label)/1.43 var(--font-sans); }
.mbc-eyebrow { font: var(--weight-medium) var(--text-eyebrow)/1.43 var(--font-sans); color: var(--action); }
.mbc-caption { font: var(--weight-regular) var(--text-caption)/1.5 var(--font-sans); color: var(--text-muted); }
.mbc-quote { font: italic var(--weight-regular) var(--text-quote)/var(--leading-quote) var(--font-serif); letter-spacing: -0.01em; }
.mbc-stat { font: var(--weight-semibold) var(--text-stat)/1 var(--font-sans); letter-spacing: var(--tracking-stat); font-variant-numeric: tabular-nums; }
.mbc-stop { color: var(--stop); }
.mbc-highlight { color: var(--signal-text); background: linear-gradient(transparent 58%, var(--signal-mark) 58%); padding-inline: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mbc-night .mbc-highlight, .mbc-evergreen .mbc-highlight { color: var(--signal); background: none; }   /* gold words on night, 10.85:1 */
.mbc-deep .mbc-highlight { color: var(--on-signal); background: var(--signal); border-radius: 4px; }   /* on deep green, gold is a fill, never text */

/* The asterisk: the tagline's footnote. "template.*" then "*This slide is. Your plan won't be."
   Web, LinkedIn, slides and social only. Never in proposals, reports, contracts, pricing or red-zone emails. */
.mbc-asterisk { color: var(--stop); font-weight: var(--weight-medium); font-size: 0.7em; vertical-align: 0.32em; line-height: 0; margin-left: 0.02em; }
.mbc-fineprint { font: var(--weight-regular) var(--text-small)/var(--leading-small) var(--font-sans); color: var(--text-muted); }
.mbc-fineprint .mbc-asterisk { font-size: 1em; vertical-align: 0; margin: 0 0.12em 0 0; }

/* Surface utilities */
.mbc-night { background: var(--gradient-night); color: var(--on-night); --text-muted: var(--on-night-muted); --stop: var(--accent); --focus: var(--accent); }
.mbc-evergreen { background: var(--gradient-evergreen); color: var(--on-night); --text-muted: var(--on-evergreen-muted); --stop: var(--accent); --focus: var(--accent); }
.mbc-deep { background: var(--gradient-deep); color: var(--on-deep); --text-muted: var(--on-deep-muted); --stop: var(--accent-strong); --focus: var(--accent-strong); }   /* leaf light passes 4.79:1 at the olive end */

/* Base */
body { margin: 0; background: var(--surface); color: var(--text); font: var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}