/*
 * BlueFennick marketing-and-document tokens (LAB-BRAND).
 *
 * Source of truth: the brand kit, version 1.1 of 2026-10-20 (docs/BlueFennick-Claude-Instructions.txt
 * sections 2, 3, 6 and 7), placed as the lab's brand by Dom on 2026-10-24. The marketing surface is
 * dark by default: "70-80% navy/dark space, 10-20% light text or light surfaces, and 5-10% saturated
 * accents" as a starting balance. The light block is for light documents and pages: white pages,
 * navy text, blue headings, restrained cyan decoration, the light-background lockup.
 *
 * The --bf-* tokens are the kit's names and values, restated once and identical to app/src/styles/
 * tokens.css. The role aliases are for marketing pages and documents. Colours inside the SVG artwork
 * are not tokens. Never restate a value downstream: pull through brand-mcp.
 */

:root {
  /* The kit's palette (sRGB), section 2 */
  --bf-navy: #000F24;
  --bf-surface: #061A35;
  --bf-blue: #0055FF;
  --bf-cyan: #00B6FE;
  --bf-sky: #62B4FE;
  --bf-ice: #BAD9F8;
  --bf-white: #F6F6F7;
  --bf-muted: #6F87AC;
  --bf-border: #31567C;
  --bf-gradient-accent: linear-gradient(135deg, #00B6FE 0%, #0055FF 100%);

  /* Type, section 3: Montserrat for all editable text; the wordmark is artwork, never typed */
  --bf-font-sans: Montserrat, Arial, Helvetica, sans-serif;
  --bf-weight-hero: 800;
  --bf-weight-heading: 700;
  --bf-weight-label: 600;
  --bf-weight-body: 400;
  --bf-text-hero: clamp(32px, 4.5vw, 64px);
  --bf-text-heading: clamp(24px, 2.8vw, 40px);
  --bf-text-subhead: 22px;
  --bf-text-label: 14px;
  --bf-text-body: 17px;
  --bf-text-overline: 13px;
  --bf-leading-hero: 1.08;
  --bf-leading-heading: 1.2;
  --bf-leading-body: 1.6;
  --bf-tracking-overline: 0.16em;
  --bf-slogan-support-scale: 0.6;  /* the supporting slogan at 55-70% of the main slogan, 400 italic */

  /* Space and shape, section 6 */
  --bf-space-1: 8px;
  --bf-space-2: 16px;
  --bf-space-3: 24px;
  --bf-space-4: 32px;
  --bf-space-6: 48px;
  --bf-space-8: 64px;
  --bf-section-gap: clamp(32px, 6vw, 64px);
  --bf-radius-sm: 6px;
  --bf-radius-md: 8px;
  --bf-radius-lg: 10px;
  --bf-plane-angle: 47deg;          /* diagonal decorative planes, 45-50 degrees, rising lower-left to upper-right */
  --bf-watermark-opacity: 0.07;     /* faint cropped B forms, 5-10% */

  /* Logo placement, section 4 */
  --bf-logo-clearspace: 0.25;       /* times the B height; 0.5 on sparse covers */
  --bf-lockup-min-width: 200px;
  --bf-b-color-min-height: 32px;
  --bf-b-mono-min-height: 16px;
  --bf-fox-min-height: 220px;
  --bf-fox-head-min-height: 96px;

  /* Role aliases, dark default */
  --bg: var(--bf-navy);
  --bg-elev: var(--bf-surface);
  --panel: var(--bf-surface);
  --tx: var(--bf-white);
  --tx-2: var(--bf-ice);
  --tx-3: var(--bf-muted);
  --rule: var(--bf-border);
  --ac: var(--bf-blue);
  --ac-2: var(--bf-cyan);
  --link: var(--bf-ice);
  --button-bg: var(--bf-blue);
  --button-tx: var(--bf-white);
  --sans: var(--bf-font-sans);
}

[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-elev: #F4F7FC;
  --panel: #FFFFFF;
  --tx: var(--bf-navy);
  --tx-2: #2B4466;
  --tx-3: #4F6688;
  --rule: #D6E0EE;
  --ac: var(--bf-blue);
  --ac-2: var(--bf-cyan);
  --link: var(--bf-blue);
  --button-bg: var(--bf-blue);
  --button-tx: var(--bf-white);
}