/* FLARE portal — design tokens as CSS custom properties.
 * Hand-written; treated as generated by convention (see docs/design.md) — there is no /tokens/*.json source or build step today.
 * Import as the root stylesheet; portal.css builds its components on these.
 *   <link rel="stylesheet" href="tokens.css">
 * All values are flat (resolved) — semantic tokens reference primitives.
 */

:root {
  /* ─── Color · navy ──────────────────────────────── */
  --bf-color-navy-50:  #F6F6F6;
  --bf-color-navy-100: #D9D9D9;
  --bf-color-navy-200: #BABABA;
  --bf-color-navy-300: #9A9A9A;
  --bf-color-navy-400: #5D5D5D;
  --bf-color-navy-500: #295399;
  --bf-color-navy-600: #1E4E90;
  --bf-color-navy-700: #192858; /* core brand */
  --bf-color-navy-800: #0B1020;
  --bf-color-navy-900: #070D1D;
  --bf-color-navy-950: #050A16;

  /* ─── Color · cyan (signature flare) ────────────── */
  --bf-color-cyan-400: #3ABCF8;
  --bf-color-cyan-500: #31A2D6;
  --bf-color-cyan-600: #3776BE;

  /* ─── Color · orange (accent) ───────────────────── */
  --bf-color-orange-500: #F26522;

  /* ─── Color · neutral ───────────────────────────── */
  --bf-color-neutral-0:   #FFFFFF;
  --bf-color-neutral-100: #F6F6F6;
  --bf-color-neutral-200: #D9D9D9;
  --bf-color-neutral-300: #BABABA;
  --bf-color-neutral-400: #9A9A9A;
  --bf-color-neutral-500: #5D5D5D;
  --bf-color-neutral-600: #484848;
  --bf-color-neutral-700: #383838;
  --bf-color-neutral-800: #252525;
  --bf-color-neutral-900: #000000;

  /* ─── Color · feedback ──────────────────────────── */
  --bf-color-danger:  #FF0202;
  --bf-color-warning: #F26522;
  --bf-color-info:    #3ABCF8;

  /* ─── Semantic aliases (use these in product code) ─ */
  --bf-bg-page:           var(--bf-color-navy-900);
  --bf-bg-page-light:     var(--bf-color-neutral-0);
  --bf-bg-surface:        var(--bf-color-navy-800);
  --bf-bg-surface-alt:    var(--bf-color-navy-700);
  --bf-bg-surface-light:  var(--bf-color-neutral-100);

  --bf-text-on-dark:        var(--bf-color-neutral-0);
  --bf-text-on-dark-muted:  var(--bf-color-neutral-300);
  --bf-text-on-light:       var(--bf-color-neutral-800);
  --bf-text-on-light-muted: var(--bf-color-neutral-500);
  --bf-text-link:           var(--bf-color-cyan-400);
  --bf-text-brand:          var(--bf-color-navy-700);

  --bf-border-default: var(--bf-color-navy-700);
  --bf-border-subtle:  var(--bf-color-neutral-200);
  --bf-border-accent:  var(--bf-color-cyan-400);
  --bf-border-on-dark: var(--bf-color-neutral-0);

  --bf-action-primary:         var(--bf-color-cyan-400);
  --bf-action-primary-hover:   var(--bf-color-cyan-500);
  --bf-action-primary-text:    var(--bf-color-navy-900);
  --bf-action-secondary:       var(--bf-color-navy-700);
  --bf-action-secondary-hover: var(--bf-color-navy-600);
  --bf-action-secondary-text:  var(--bf-color-neutral-0);
  --bf-action-accent:          var(--bf-color-orange-500);

  /* ─── Typography ──────────────────────────────────
   * Free-substitute stack: Sora (Google Fonts) for display, Selawik (Microsoft's
   * open-source Segoe UI clone, SIL OFL 1.1, self-hosted from /fonts) for body.
   * Native brand fonts (Creato Display, Segoe UI) remain first in the stack so
   * licensed deployments don't require any token change. See fonts.md.
   */
  --bf-font-display: 'Creato Display', 'Sora', 'Segoe UI', 'Selawik', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --bf-font-body:    'Segoe UI', 'Selawik', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --bf-font-weight-regular:  400;
  --bf-font-weight-semibold: 600;
  --bf-font-weight-bold:     700;

  --bf-text-xs:   12px;
  --bf-text-sm:   14px;
  --bf-text-base: 16px;
  --bf-text-md:   18px;
  --bf-text-lg:   20px;
  --bf-text-xl:   24px;
  --bf-text-2xl:  28px;
  --bf-text-3xl:  40px;
  --bf-text-4xl:  56px;

  --bf-leading-tight:   1.0;
  --bf-leading-snug:    1.15;
  --bf-leading-normal:  1.25;
  --bf-leading-relaxed: 1.4;
  --bf-leading-loose:   1.6;
  --bf-leading-display: 1.1;

  --bf-tracking-normal: 0;
  --bf-tracking-wide:   0.03em;
  --bf-tracking-wider:  0.3em;

  /* ─── Spacing (4-px base, 10-px friendly) ───────── */
  --bf-space-0:  0;
  --bf-space-1:  4px;
  --bf-space-2:  8px;
  --bf-space-2_5:10px;
  --bf-space-3:  12px;
  --bf-space-4:  16px;
  --bf-space-5:  20px;
  --bf-space-6:  24px;
  --bf-space-8:  32px;
  --bf-space-9:  36px;
  --bf-space-10: 40px;
  --bf-space-13: 53px;
  --bf-space-16: 64px;
  --bf-space-20: 80px;
  --bf-space-24: 96px;

  /* ─── Layout ────────────────────────────────────── */
  --bf-container-max:      1280px;
  --bf-gutter:             24px;
  --bf-gutter-mobile:      16px;
  --bf-section-y:          80px;
  --bf-section-y-mobile:   53px;

  /* ─── Radius ────────────────────────────────────────
   * Square corners, everywhere (philosophy adopted 2026-07-14).
   * All steps resolve to 0 and are retained only so existing code
   * that references them renders square. Omit border-radius in new code.
   */
  --bf-radius-none: 0;
  --bf-radius-xs:   0;
  --bf-radius-sm:   0;
  --bf-radius-md:   0;
  --bf-radius-lg:   0;
  --bf-radius-xl:   0;
  --bf-radius-2xl:  0;
  --bf-radius-3xl:  0;
  --bf-radius-pill: 0;

  /* ─── Shadows (signature flare glow) ────────────── */
  --bf-shadow-flare-soft:   0 0 79px 0 rgba(58, 188, 248, 0.05);
  --bf-shadow-flare-medium: 0 0 29px 0 rgba(58, 188, 248, 0.50);
  --bf-shadow-flare-hover:  0 1px 22px 0 rgba(58, 188, 248, 0.40);
  --bf-shadow-flare-ring:   0 0 10.3px 1px #31A2D6, 0 0 10.9px 1px #31A2D6;
  --bf-shadow-elevation-1:  0 0 79px 0 rgba(0, 0, 0, 0.10);
  --bf-shadow-drift:        22px 0 92px 0 rgba(58, 188, 248, 0.10);

  /* ─── Breakpoints (also exposed for JS readers) ──── */
  --bf-bp-sm:  640px;
  --bf-bp-md:  768px;
  --bf-bp-lg:  1024px;
  --bf-bp-xl:  1280px;
  --bf-bp-2xl: 1536px;
}

/* ─── Reusable text styles ──────────────────────────────────────────────── */
.bf-text-display-1 { font: var(--bf-font-weight-bold) var(--bf-text-4xl)/var(--bf-leading-display) var(--bf-font-display); letter-spacing: var(--bf-tracking-normal); }
.bf-text-display-2 { font: var(--bf-font-weight-bold) var(--bf-text-3xl)/var(--bf-leading-display) var(--bf-font-display); letter-spacing: var(--bf-tracking-normal); }
.bf-text-h2        { font: var(--bf-font-weight-semibold) var(--bf-text-2xl)/var(--bf-leading-relaxed) var(--bf-font-body); }
.bf-text-h3        { font: var(--bf-font-weight-bold) var(--bf-text-xl)/var(--bf-leading-snug)   var(--bf-font-body); }
.bf-text-h4        { font: var(--bf-font-weight-bold) var(--bf-text-lg)/var(--bf-leading-normal) var(--bf-font-body); }
.bf-text-lead      { font: var(--bf-font-weight-regular) var(--bf-text-md)/var(--bf-leading-loose) var(--bf-font-body); letter-spacing: var(--bf-tracking-wide); }
.bf-text-body      { font: var(--bf-font-weight-regular) var(--bf-text-base)/var(--bf-leading-normal) var(--bf-font-body); }
.bf-text-body-loose{ font: var(--bf-font-weight-regular) var(--bf-text-base)/var(--bf-leading-loose) var(--bf-font-body); letter-spacing: var(--bf-tracking-wide); }
.bf-text-body-sm   { font: var(--bf-font-weight-regular) var(--bf-text-sm)/var(--bf-leading-normal) var(--bf-font-body); }
.bf-text-label     { font: var(--bf-font-weight-semibold) var(--bf-text-sm)/var(--bf-leading-normal) var(--bf-font-body); }
.bf-text-button    { font: var(--bf-font-weight-semibold) var(--bf-text-base)/var(--bf-leading-normal) var(--bf-font-body); }
.bf-text-caption   { font: var(--bf-font-weight-regular) var(--bf-text-xs)/var(--bf-leading-relaxed) var(--bf-font-body); }
.bf-text-eyebrow   { font: var(--bf-font-weight-bold) var(--bf-text-xs)/var(--bf-leading-tight) var(--bf-font-body); letter-spacing: var(--bf-tracking-wider); text-transform: uppercase; }