/*
 * BeniComp brand tokens.
 * Source: Figma "Brand Guidelines" (file pM59JE8ttZR1S8TzG4mObu, March 2021).
 * Generated from brand-spec.json. Do not hand-edit values; update brand-spec.json
 * and regenerate so the spec, tokens, and templates stay in sync.
 *
 * Layering (mirrors a swappable design system):
 *   brand   = raw primitive values (the only place hex/sizes live)
 *   semantic = UI roles that reference brand primitives
 * Templates and components should consume the --bc-* semantic tokens, never raw hex,
 * so a future rebrand only changes the brand layer.
 *
 * Modified By: Matt Horton on 2026-08-07 - Self-hosted the Poppins/Open Sans
 * @font-face declarations (REQ-UI-012) so the brand fonts actually load; see
 * public/assets/fonts/README.md for provenance and the Google Fonts fallback.
 * Modified By: Matt Horton on 2026-08-22 - Added Open Sans 600/700 and Poppins
 * italic 600 faces plus the --bc-brand-pale/-pale-band surfaces the renewal
 * landing composition needs (REQ-CEN-17x).
 * Modified By: Matt Horton on 2026-08-24 - Dropped the Poppins italic 600 face.
 * The Signature wordmark lost its slant in the renewal landing copy refresh,
 * and no other surface requested an italic Poppins: the internal app declares
 * no italic rules and the email composer's authored italics render in the
 * preview's Arial stack.
 */

/*
 * Self-hosted brand fonts (REQ-UI-012, REQ-SEC-004). Files are the Google
 * Fonts "latin" subset woff2 for each weight, fetched from fonts.gstatic.com
 * and stored under public/assets/fonts/ so no third-party request is needed
 * at runtime and the CSP stays tight. font-display: swap avoids invisible
 * text while the file loads; the family's own system-ui fallback (below)
 * covers the brief swap window and total failure to fetch.
 */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-v24-latin-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin-700.woff2') format('woff2');
}

:root {
  /* ---- Brand primitives ---- */
  --bc-brand-snow: #FFFFFF;
  --bc-brand-forest: #002B2C;
  --bc-brand-mint: #44BB8D;
  --bc-brand-fog: #F8F8F8; /* assumed; confirm with brand owner */
  /* Pale mint surfaces: --pale fills cards/pills sitting on Forest or white,
     --pale-band tints full-bleed sections. Both taken from the renewal
     landing composition; they are lighter than mint-100 and read as
     "background", never as an interactive fill. */
  --bc-brand-pale: #D9FCDE;
  --bc-brand-pale-band: #E2FAE7;

  /* ---- Tint/shade scales (base color sits at -600) ---- */
  --bc-brand-mint-100: #ECF8F4;
  --bc-brand-mint-200: #CBECDF;
  --bc-brand-mint-300: #A9E0CB;
  --bc-brand-mint-400: #87D3B6;
  --bc-brand-mint-500: #66C7A2;
  --bc-brand-mint-600: #44BB8D; /* base Mint */
  --bc-brand-mint-700: #389974;
  --bc-brand-mint-800: #2C785A;
  --bc-brand-mint-900: #1F5641;
  --bc-brand-mint-1000: #133427;
  --bc-brand-mint-1100: #0A1A14;

  --bc-brand-forest-100: #E6EAEA;
  --bc-brand-forest-200: #B8C4C4;
  --bc-brand-forest-300: #8A9D9E;
  --bc-brand-forest-400: #5C7778;
  --bc-brand-forest-500: #2E5152;
  --bc-brand-forest-600: #002B2C; /* base Forest */
  --bc-brand-forest-700: #002324;
  --bc-brand-forest-800: #001C1C;
  --bc-brand-forest-900: #001414;
  --bc-brand-forest-1000: #000C0C;
  --bc-brand-forest-1100: #000606;

  /* ---- Gradients (for section/card backgrounds on white) ---- */
  --bc-gradient-blue-white: linear-gradient(to bottom, #D9FCF8, #FFFFFF);
  --bc-gradient-yellow-green: linear-gradient(to bottom, #FBFFEC, #D9FCDE);
  --bc-gradient-blue-green: linear-gradient(to bottom, #D9FCF8, #D9FCDE);
  /* Forest-anchored gradients (deep Forest top, fading down) */
  --bc-gradient-forest-white: linear-gradient(to bottom, #002B2C, #FFFFFF);
  --bc-gradient-forest-lime: linear-gradient(to bottom, #002B2C, #DCF5E6);
  --bc-gradient-forest-blue: linear-gradient(to bottom, #002B2C, #27597B);

  /* ---- Illustration gradients (behind transparent grayscale cutouts) ----
   * The people/scene illustrations are transparent-background grayscale PNGs;
   * the brand color lives in this gradient, which shows through the cutout. */
  --bc-gradient-illustration-light: linear-gradient(135deg, #E2FCE1 0%, #ECFCE6 35%, #FFFFFF 100%);
  --bc-gradient-illustration-dark: radial-gradient(120% 100% at 50% 70%, #1D4D67 0%, #103E4D 45%, #002B2C 100%);

  --bc-brand-font-heading: "Poppins", "Filson Pro", system-ui, sans-serif;
  --bc-brand-font-body: "Open Sans", system-ui, sans-serif;

  --bc-brand-weight-heading-heavy: 600; /* Poppins SemiBold (was Filson Pro Heavy) */
  --bc-brand-weight-heading-medium: 500;
  --bc-brand-weight-heading-regular: 400;
  --bc-brand-weight-heading-bold: 700;

  /* ---- Semantic color roles ---- */
  --bc-surface-page: var(--bc-brand-snow);
  --bc-surface-dark: var(--bc-brand-forest);
  --bc-surface-image-frame: var(--bc-brand-fog);

  --bc-text-heading: var(--bc-brand-forest);
  --bc-text-body: var(--bc-brand-forest);
  --bc-text-on-dark: var(--bc-brand-snow);

  --bc-cta-fill: var(--bc-brand-mint);
  --bc-cta-on-fill: var(--bc-brand-snow);
  --bc-cta-text: var(--bc-brand-mint);

  --bc-border-emphasis: var(--bc-brand-forest);

  /* ---- Type scale (pt as authored in the guidelines) ---- */
  --bc-font-headline: var(--bc-brand-weight-heading-heavy) 48pt/1.1 var(--bc-brand-font-heading);
  --bc-font-headline-long: var(--bc-brand-weight-heading-medium) 48pt/1.1 var(--bc-brand-font-heading);
  --bc-font-subhead: var(--bc-brand-weight-heading-medium) 24pt/1.25 var(--bc-brand-font-heading);
  --bc-font-subhead-long: var(--bc-brand-weight-heading-regular) 24pt/1.25 var(--bc-brand-font-heading);
  --bc-font-body: var(--bc-brand-weight-heading-regular) 16pt/1.5 var(--bc-brand-font-body);

  --bc-headline-size: 48pt;
  --bc-headline-line-height: 1.1;
  --bc-subhead-size: 24pt;
  --bc-subhead-line-height: 1.25;
  --bc-body-size: 16pt;
  --bc-body-line-height: 1.5;
  --bc-cta-size: 16pt;

  /*
   * ---- Spacing scale ----
   * Not sourced from brand-spec.json/Figma; a layout-system addition so
   * main.css's gap/padding/margin values stop being repeated magic numbers.
   * Surveyed from every rem value main.css already used for spacing: the app
   * was already consistently working in 2px increments up to 1rem and 4px
   * increments above it, so the scale below just names that grid rather than
   * inventing a new one. Numeric suffixes follow rem * 4 (a quarter-rem
   * "unit"), so --bc-space-4 is 1rem, --bc-space-8 is 2rem, and so on; the
   * half-steps below 1rem keep the -1-5/-2-5/-3-5 suffix pattern since CSS
   * custom properties cannot contain a literal decimal point.
   */
  --bc-space-1: 0.25rem;
  --bc-space-1-5: 0.375rem;
  --bc-space-2: 0.5rem;
  --bc-space-2-5: 0.625rem;
  --bc-space-3: 0.75rem;
  --bc-space-3-5: 0.875rem;
  --bc-space-4: 1rem;
  --bc-space-5: 1.25rem;
  --bc-space-6: 1.5rem;
  --bc-space-7: 1.75rem;
  --bc-space-8: 2rem;
  --bc-space-9: 2.25rem;
  --bc-space-10: 2.5rem;
  --bc-space-11: 2.75rem;
  --bc-space-12: 3rem;
  --bc-space-16: 4rem;

  /* Semantic aliases: main.css's pager rule already referenced these with a
     literal fallback because neither existed. Defined here so that fallback
     is no longer load-bearing. */
  --bc-space-sm: var(--bc-space-3);
  --bc-space-md: var(--bc-space-4);

  /*
   * ---- Corner radii ----
   * Named so a component asks for a role, not a number. main.css had three
   * near-identical values in play (0.25/0.375/0.5rem) with no system; the
   * scale below keeps the two the design actually uses and gives the dialog
   * its larger, deliberate step.
   */
  --bc-radius-sm: 0.25rem; /* chips, code cells */
  --bc-radius-md: 0.375rem; /* cards, buttons, inputs, callouts, tables */
  --bc-radius-lg: 0.5rem; /* dialogs */
  --bc-radius-pill: 999px; /* badges */

  /*
   * ---- Type sizes main.css uses but never named ----
   * These are consumed by the component layer; naming them keeps every rem
   * font size out of main.css (REQ-UI-020) and visible to a rebrand.
   */
  --bc-type-heading-sm: 1.25rem; /* h3, metric values, cohort dates */
  --bc-type-lockup: 1.125rem; /* header wordmark, one-time secret text */
}

/* Helper classes templates/web pages can apply directly */
.bc-headline {
  font-family: var(--bc-brand-font-heading);
  font-weight: var(--bc-brand-weight-heading-heavy);
  font-size: var(--bc-headline-size);
  line-height: var(--bc-headline-line-height);
  color: var(--bc-text-heading);
}
.bc-subhead {
  font-family: var(--bc-brand-font-heading);
  font-weight: var(--bc-brand-weight-heading-medium);
  font-size: var(--bc-subhead-size);
  line-height: var(--bc-subhead-line-height);
  color: var(--bc-text-heading);
}
.bc-body {
  font-family: var(--bc-brand-font-body);
  font-weight: var(--bc-brand-weight-heading-regular);
  font-size: var(--bc-body-size);
  line-height: var(--bc-body-line-height);
  color: var(--bc-text-body);
}
.bc-cta-button {
  font-family: var(--bc-brand-font-heading);
  font-weight: var(--bc-brand-weight-heading-bold);
  font-size: var(--bc-cta-size);
  text-transform: uppercase;
  color: var(--bc-cta-on-fill);
  background: var(--bc-cta-fill);
}
.bc-cta-text {
  font-family: var(--bc-brand-font-heading);
  font-weight: var(--bc-brand-weight-heading-bold);
  font-size: var(--bc-cta-size);
  text-transform: uppercase;
  color: var(--bc-cta-text);
  background: transparent;
}