/* Clarity360 × BFD — hybrid tokens
   BFD bones (Montserrat, layout discipline, sticky-notes, monochrome backbone)
   Clarity360 teal as --bf-accent-client (single splash accent)               */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,500&family=JetBrains+Mono:wght@400;500&family=Lora:ital,wght@0,500;0,600;1,400;1,500&display=swap');

:root {
  /* Type */
  --font-sans:    "Montserrat", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Monaco, Consolas, monospace;
  /* Editorial serif used very sparingly — narrative beats only, not UI chrome */
  --font-editorial: "Lora", Georgia, serif;

  /* Ship (60%) — monochrome backbone */
  --bf-bg:       #F4F4F5;
  --bf-surface:  #E4E4E7;
  --bf-paper:    #FAFAFA;
  --bf-text:     #171717;
  --bf-muted:    #71717A;
  --bf-border:   #D4D4D8;
  --bf-alt-bg:   #FFFFFF;

  /* Officers (15%) */
  --bf-button:      #171717;
  --bf-button-text: #FAFAFA;

  /* Client accent — Clarity360 teal slotted into the crew slot */
  --c360-teal:        #1B6B6B;
  --c360-teal-mid:    #2E8B8B;
  --c360-teal-pale:   #E8F5F5;
  --c360-teal-ghost:  #F0F9F9;
  --bf-accent-client: var(--c360-teal);

  /* Crew (used sparingly for driver / state coloring — semantic, not decorative) */
  --bf-gold:    #FFC800;
  --bf-mint:    #5AE09A;
  --bf-royal:   #7B3EC4;
  --bf-crimson: #E04848;
  --bf-cobalt:  #3B6CE7;
  --bf-amber:   #E89020;

  /* Driver-specific tints — one color per driver, used as signal not chrome */
  --drv-bsi:   #3B6CE7;  /* Blood Sugar + Insulin */
  --drv-cep:   #1B6B6B;  /* Cellular Energy — the Hub */
  --drv-csr:   #7B3EC4;  /* Chemical Signaling + Regulatory */
  --drv-inf:   #E04848;  /* Inflammation + Oxidative Stress */
  --drv-mf:    #2BB5A0;  /* Metabolic Flexibility */

  --drv-bsi-tint: #EEF3FE;
  --drv-cep-tint: #E8F5F5;
  --drv-csr-tint: #F4ECFA;
  --drv-inf-tint: #FCEDED;
  --drv-mf-tint:  #E6F7F3;

  /* Activation states */
  --act-primary:      #B91C1C;
  --act-activated:    #C2410C;
  --act-vulnerable:   #B45309;
  --act-contributing: #15803D;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-card:     0 4px 24px rgba(0,0,0,0.05);
  --shadow-comic:    4px 4px 0px 0px rgba(0,0,0,0.92);
  --shadow-comic-sm: 2px 2px 0px 0px rgba(0,0,0,0.92);

  --ease-brand:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-transform: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--bf-text);
  background: var(--bf-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}
h1, h2, h3, h4, h5 { margin: 0; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
::selection { background: rgba(27,107,107,0.22); }

.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bf-muted);
  line-height: 1;
}

/* Driver chip — reusable across all variations */
.dchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
  background: transparent;
  white-space: nowrap;
}
.dchip .ddot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.dchip.bsi { color: var(--drv-bsi); background: var(--drv-bsi-tint); }
.dchip.cep { color: var(--drv-cep); background: var(--drv-cep-tint); }
.dchip.csr { color: var(--drv-csr); background: var(--drv-csr-tint); }
.dchip.inf { color: var(--drv-inf); background: var(--drv-inf-tint); }
.dchip.mf  { color: var(--drv-mf);  background: var(--drv-mf-tint); }

/* Sticky note — BFD signature, repurposed in teal for "client" voice */
.sticky {
  background: var(--c360-teal);
  color: #FAFAFA;
  border: 3px solid var(--bf-text);
  box-shadow: var(--shadow-comic);
  padding: 16px 18px;
  font-weight: 600;
  line-height: 1.3;
}
.sticky.gold { background: var(--bf-gold); color: var(--bf-text); }
.sticky.paper { background: var(--bf-paper); color: var(--bf-text); }