/* Generated from current shared BMC/BR8N source; edit sources, not this artifact. */
/*
 * @bmc/design-system — BASE tokens. IDENTICAL across all apps. No accent here.
 *
 * Built ON the brand-design-system skill's token model (same --bds-* var names so
 * the skill's components work unmodified) and stamped with the collective's spine:
 * graphite #141212 + neutral paper #F8F8F6, Cottorway (display) + Inter (body).
 *
 * Per-app variance is exactly two things, set in the app's globals.css:
 *   1. which accent file it imports (accent-red / -orange / -yellow)
 *   2. --font-display-weight (8gnc 900 · collective 800 · Contraband 700 · br8n 600)
 * Everything below is shared.
 */

:root {
  /* ---- graphite ramp (dark surfaces) — anchor #141212 -------------- */
  --graphite-950: oklch(0.178 0.006 40);   /* #141212  base dark   */
  --graphite-900: oklch(0.205 0.006 40);   /* #1c1a18  elevation+1 */
  --graphite-800: oklch(0.235 0.007 40);   /* #25221f  card bg     */
  --graphite-700: oklch(0.270 0.007 40);   /* #2f2c28  border      */
  --graphite-600: oklch(0.340 0.006 40);
  --graphite-500: oklch(0.430 0.005 40);

  /* ---- neutral paper ramp (light surfaces) — anchor #F8F8F6 ------ */
  --paper-50:  #F8F8F6;   /* base paper: near-white, not cream */
  --paper-100: #EFEFEB;   /* secondary light surface */
  --paper-200: #D9D9D4;   /* quiet border / tertiary text */
  --paper-300: #9A9994;   /* muted text / footer */

  /* Legacy aliases. Runtime code is migrating to paper semantics; these keep
     established routes stable while removing the old warm cream appearance. */
  --cream-50: var(--paper-50);
  --cream-100: var(--paper-100);
  --cream-200: var(--paper-200);
  --cream-300: var(--paper-300);

  /* ---- primary neutrals (BDS-compat names → graphite/paper) ------- */
  --bds-color-primary-charcoal: var(--graphite-950); /* ink   */
  --bds-color-primary-vanilla:  var(--paper-50);     /* paper */

  /* ---- mono scale (structural, fixed) ----------------------------- */
  --bds-color-mono-black: #000000;
  --bds-color-mono-black-10: #F0F0F0;
  --bds-color-mono-black-20: #EBEBEB;
  --bds-color-mono-black-30: #DDDEE2;
  --bds-color-mono-black-40: #C7C7C7;
  --bds-color-mono-black-50: #A3A3A3;
  --bds-color-mono-black-60: #787878;
  --bds-color-mono-black-70: #595959;
  --bds-color-mono-black-80: #4A4A4A;
  --bds-color-mono-black-90: #383838;
  --bds-color-mono-white: #FFFFFF;

  /* ---- ux semantic (fixed) ---------------------------------------- */
  --bds-color-ux-error: #FF3737;
  --bds-color-ux-success: #07CB9C;
  --diagnostic-cyan: #26afff;   /* shared diagnostic accent (hero + AEO/x-ray motifs), 6/14 */

  /* ---- fonts — Cottorway display, Inter body (6/14 decision) ------ */
  --bds-font-display:  "Cottorway Pro", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bds-font-headings: "Cottorway Pro", "Inter", ui-sans-serif, system-ui, sans-serif;
  --bds-font-body:     "Inter", ui-sans-serif, system-ui, sans-serif;
  --bds-font-accent:   "Cottorway Pro", ui-sans-serif, sans-serif;
  --bds-font-mono:     "IBM Plex Mono", ui-monospace, monospace;

  /* per-app display weight (overridden in app globals.css) */
  --font-display-weight: 800;

  /* ---- spacing scale (structural) --------------------------------- */
  --space-n12: -3rem; --space-n8: -2rem; --space-n4: -1rem; --space-n2: -0.5rem;
  --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --space-28: 7rem; --space-32: 8rem; --space-36: 9rem; --space-40: 10rem;
  --space-44: 11rem; --space-48: 12rem; --space-56: 14rem; --space-64: 16rem;
  --space-72: 18rem; --space-80: 20rem; --space-96: 24rem; --space-112: 28rem;
  --space-128: 32rem; --space-256: 64rem;

  /* ---- radius scale (structural) ---------------------------------- */
  --bds-radius-none: 0; --bds-radius-sm: 0.25rem; --bds-radius-default: 0.5rem;
  --bds-radius-md: 0.5rem; --bds-radius-lg: 0.75rem; --bds-radius-xl: 1rem;
  --bds-radius-2xl: 1.5rem; --bds-radius-3xl: 2rem; --bds-radius-full: 9999px;

  /* ---- max-width scale (structural) ------------------------------- */
  --max-w-xs: 20rem; --max-w-sm: 24rem; --max-w-md: 28rem; --max-w-lg: 32rem;
  --max-w-xl: 36rem; --max-w-2xl: 42rem; --max-w-3xl: 48rem; --max-w-4xl: 56rem;
  --max-w-5xl: 64rem; --max-w-6xl: 72rem; --max-w-7xl: 80rem;

  /* ---- type role bundles (structural ratios; family swappable) ----
     Display + H1/H2 take --font-display-weight so each brand's loud type
     shifts weight (900/800/700/600) with zero component edits. */
  --text-display-1-family: var(--bds-font-display);
  --text-display-1-size: clamp(3rem, 6vw + 1rem, 5rem);
  --text-display-1-weight: var(--font-display-weight);
  --text-display-1-lh: 1.0; --text-display-1-ls: -0.025em;

  --text-display-2-family: var(--bds-font-display);
  --text-display-2-size: clamp(2.5rem, 5vw + 1rem, 4rem);
  --text-display-2-weight: var(--font-display-weight);
  --text-display-2-lh: 1.05; --text-display-2-ls: -0.02em;

  --text-heading-1-family: var(--bds-font-headings);
  --text-heading-1-size: clamp(2rem, 3vw + 1rem, 3rem);
  --text-heading-1-weight: var(--font-display-weight);
  --text-heading-1-lh: 1.1; --text-heading-1-ls: -0.02em;

  --text-heading-2-family: var(--bds-font-headings);
  --text-heading-2-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --text-heading-2-weight: 700;
  --text-heading-2-lh: 1.15; --text-heading-2-ls: -0.015em;

  --text-heading-3-family: var(--bds-font-headings);
  --text-heading-3-size: 1.75rem; --text-heading-3-weight: 700;
  --text-heading-3-lh: 1.2; --text-heading-3-ls: -0.01em;

  --text-heading-4-family: var(--bds-font-headings);
  --text-heading-4-size: 1.5rem; --text-heading-4-weight: 600;
  --text-heading-4-lh: 1.25; --text-heading-4-ls: -0.01em;

  --text-heading-5-family: var(--bds-font-headings);
  --text-heading-5-size: 1.25rem; --text-heading-5-weight: 600;
  --text-heading-5-lh: 1.3; --text-heading-5-ls: 0;

  --text-heading-6-family: var(--bds-font-headings);
  --text-heading-6-size: 1.125rem; --text-heading-6-weight: 600;
  --text-heading-6-lh: 1.35; --text-heading-6-ls: 0;

  --text-body-1-family: var(--bds-font-body);
  --text-body-1-size: 1.125rem; --text-body-1-weight: 400;
  --text-body-1-lh: 1.6; --text-body-1-ls: 0;

  --text-body-2-family: var(--bds-font-body);
  --text-body-2-size: 1rem; --text-body-2-weight: 400;
  --text-body-2-lh: 1.6; --text-body-2-ls: 0;

  --text-label-family: var(--bds-font-headings);
  --text-label-size: 0.875rem; --text-label-weight: 600;
  --text-label-lh: 1.2; --text-label-ls: 0.01em;

  --text-button-family: var(--bds-font-headings);
  --text-button-size: 1rem; --text-button-weight: 600;
  --text-button-lh: 1.0; --text-button-ls: 0;

  --text-caption-family: var(--bds-font-body);
  --text-caption-size: 0.75rem; --text-caption-weight: 400;
  --text-caption-lh: 1.4; --text-caption-ls: 0.01em;
}

/* Michael's 2026-09-22 holding-page identity. Opt-in; other faces retain their themes. */
.br8n-holding {
  --br8n-holding-ink: #321126;
  --br8n-holding-paper: #eeeae2;
  --br8n-holding-font: "aleo", sans-serif;
}

/* September 2026 BR8N public identity. Explicitly opt-in; no sibling theme changes. */
.br8n-public {
  --br8n-public-ink: var(--br8n-holding-ink);
  --br8n-public-paper: var(--br8n-holding-paper);
  --br8n-public-sheet: #f7f3ec;
  --br8n-public-context-surface: #e6dceb;
  --br8n-public-muted: #65535e;
  --br8n-public-line: color-mix(in srgb, var(--br8n-public-ink) 22%, transparent);
  --br8n-public-font: var(--br8n-holding-font);
  --br8n-public-body-font: var(--bds-font-accent);
  --br8n-public-width: 78rem;
  --br8n-public-gutter: clamp(1.25rem, 5vw, 5rem);
}

/* Editorial type scale B selected by Michael, September 29, 2026. */
.br8n-public {
  --br8n-public-story-gutter: clamp(1.25rem, 10.3vw, 14rem);
  --br8n-public-story-h1: clamp(2.9rem, 1.5rem + 2.9vw, 5rem);
  --br8n-public-story-h2: clamp(2.2rem, 1.3rem + 2.05vw, 4rem);
  --br8n-public-story-body: clamp(1.1875rem, 1rem + .54vw, 1.6875rem);
  --br8n-public-story-eyebrow: clamp(1.0625rem, .9rem + .3vw, 1.25rem);
  --br8n-public-nav-size: clamp(1.0625rem, .9rem + .3vw, 1.25rem);
  --br8n-public-action-size: clamp(1.125rem, 1rem + .25vw, 1.375rem);
  --br8n-public-offer-size: clamp(1.0625rem, .95rem + .25vw, 1.25rem);
  --br8n-public-prose-size: clamp(1.1875rem, 1rem + .36vw, 1.4375rem);
  --br8n-public-prose-leading: 1.55;
  --br8n-public-prose-width: 56ch;
  --br8n-public-item-size: clamp(1.5rem, 1.15rem + .65vw, 2rem);
  --br8n-public-caption-size: 1rem;
  --br8n-public-section-space: clamp(3.5rem, 6vw, 7rem);
  --br8n-public-hero-space: clamp(2.5rem, 4.5vw, 5.5rem);
  --br8n-public-founder-frame: 44% 56% 47% 53% / 35% 37% 63% 65%;
  --br8n-public-practice-frame: 24% 32% 26% 30% / 19% 24% 26% 23%;
  --br8n-public-button-ratio: 4.2;
  --br8n-public-button-width: clamp(17.5rem, 14rem + 6.5vw, 22rem);
  --br8n-public-button-short-width: clamp(12.5rem, 10rem + 2vw, 13rem);
  --br8n-public-button-shape: polygon(91.45% 9.30%, 90.07% 7.64%, 88.68% 6.23%, 87.29% 5.05%, 85.89% 4.07%, 84.47% 3.27%, 83.05% 2.62%, 81.61% 2.10%, 80.15% 1.70%, 77.68% 1.14%, 75.22% 0.69%, 72.78% 0.36%, 70.34% 0.13%, 67.90% 0.01%, 65.45% 0.01%, 62.98% 0.12%, 60.48% 0.35%, 25.65% 4.35%, 23.94% 4.63%, 22.26% 5.10%, 20.60% 5.72%, 18.95% 6.50%, 17.30% 7.42%, 15.66% 8.46%, 14.01% 9.61%, 12.35% 10.86%, 10.08% 13.01%, 7.85% 15.95%, 5.75% 19.76%, 3.85% 24.52%, 2.25% 30.31%, 1.02% 37.21%, 0.24% 45.30%, 0.00% 54.66%, 0.29% 62.18%, 1.01% 69.12%, 2.11% 75.38%, 3.49% 80.90%, 5.09% 85.57%, 6.83% 89.32%, 8.62% 92.05%, 10.41% 93.68%, 17.39% 97.85%, 19.90% 98.40%, 22.40% 98.87%, 24.88% 99.24%, 27.36% 99.53%, 29.85% 99.75%, 32.36% 99.89%, 34.91% 99.97%, 37.49% 99.99%, 60.79% 99.87%, 62.95% 99.82%, 65.08% 99.71%, 67.20% 99.52%, 69.32% 99.26%, 71.43% 98.93%, 73.54% 98.51%, 75.67% 98.01%, 77.81% 97.42%, 80.86% 96.45%, 84.04% 95.03%, 87.23% 92.88%, 90.33% 89.70%, 93.20% 85.19%, 95.74% 79.06%, 97.82% 71.02%, 99.33% 60.75%, 99.92% 52.22%, 99.94% 44.04%, 99.45% 36.34%, 98.51% 29.25%, 97.18% 22.87%, 95.52% 17.35%, 93.59% 12.78%, 91.44% 9.30%);
  --br8n-public-button-short-shape: polygon(8.55% 90.70%, 9.93% 92.36%, 11.32% 93.77%, 12.71% 94.95%, 14.11% 95.93%, 15.53% 96.73%, 16.95% 97.38%, 18.39% 97.90%, 19.85% 98.30%, 22.32% 98.86%, 24.78% 99.31%, 27.23% 99.65%, 29.66% 99.88%, 32.10% 99.99%, 34.55% 99.99%, 37.02% 99.88%, 39.52% 99.65%, 74.35% 95.65%, 76.06% 95.37%, 77.74% 94.90%, 79.40% 94.28%, 81.05% 93.50%, 82.70% 92.58%, 84.34% 91.54%, 85.99% 90.39%, 87.65% 89.14%, 89.92% 86.99%, 92.15% 84.06%, 94.26% 80.25%, 96.15% 75.49%, 97.75% 69.70%, 98.98% 62.79%, 99.76% 54.70%, 100.00% 45.34%, 99.71% 37.82%, 98.99% 30.88%, 97.89% 24.62%, 96.51% 19.10%, 94.91% 14.43%, 93.17% 10.68%, 91.38% 7.95%, 89.59% 6.32%, 82.61% 2.15%, 80.10% 1.59%, 77.60% 1.13%, 75.12% 0.75%, 72.64% 0.46%, 70.14% 0.24%, 67.63% 0.09%, 65.09% 0.02%, 62.51% 0.00%, 39.21% 0.12%, 37.05% 0.17%, 34.91% 0.28%, 32.79% 0.46%, 30.68% 0.72%, 28.57% 1.06%, 26.45% 1.48%, 24.33% 1.98%, 22.19% 2.56%, 19.14% 3.54%, 15.96% 4.96%, 12.77% 7.11%, 9.67% 10.29%, 6.80% 14.80%, 4.26% 20.93%, 2.18% 28.98%, 0.67% 39.25%, 0.08% 47.78%, 0.06% 55.96%, 0.55% 63.66%, 1.49% 70.75%, 2.82% 77.13%, 4.48% 82.65%, 6.41% 87.22%, 8.55% 90.70%);
}


@media (max-width: 760px) {
  .br8n-public { --br8n-public-story-gutter: 1.25rem; }
}

/* Current BR8N hand-drawn control recipe, opt-in to the public identity only.
 * Shape, palette, type and width read the existing design-system tokens.
 * The skin is clipped; the native control, live label and focus ring are not. */
.br8n-public .br8n-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;position:relative;isolation:isolate;box-sizing:border-box;width:min(100%,var(--br8n-public-button-width));max-width:100%;min-width:0;min-height:3.5rem;aspect-ratio:var(--br8n-public-button-ratio);padding:.95rem 1.5rem;border:0;border-radius:0;background:transparent;color:var(--br8n-public-sheet)!important;font:400 var(--br8n-public-action-size)/1.3 var(--br8n-public-body-font);text-align:center;text-decoration:none!important;white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.br8n-public .br8n-button::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--br8n-public-ink);clip-path:var(--br8n-public-button-shape)}
.br8n-public .br8n-button--secondary{color:var(--br8n-public-ink)!important}
.br8n-public .br8n-button--secondary::after{content:'';position:absolute;inset:1.5px;z-index:-1;background:var(--br8n-public-sheet);clip-path:var(--br8n-public-button-shape)}
.br8n-public .br8n-button--compact{width:min(100%,var(--br8n-public-button-short-width));min-height:3rem;padding:.8rem 1.25rem;font-size:var(--br8n-public-caption-size)}
.br8n-public .br8n-button:not(:disabled):hover::before{background:var(--br8n-public-muted)}
.br8n-public .br8n-button--secondary:not(:disabled):hover::after{background:var(--br8n-public-paper)}
.br8n-public .br8n-button:focus-visible{outline:3px solid var(--br8n-public-ink);outline-offset:4px}
.br8n-public .br8n-button:disabled{opacity:.6;cursor:default}
.br8n-public .br8n-button svg{display:block;width:18px;height:18px;flex-shrink:0}
@media print{.br8n-public .br8n-button{display:none}}

@font-face { font-family: 'Cottorway Pro'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/cottorway/CottorwayPro-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Cottorway Pro'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/cottorway/CottorwayPro-Bold.woff2') format('woff2'); }