/* ============================================================
   BOLDFLO DESIGN SYSTEM — 01 · BRAND LINE
   The vocabulary everything else is spelled in. No component
   file may invent a colour, a size, a radius or an ease that
   is not declared here.
   ============================================================ */

/* ---------- Clash Display, self-hosted ----------
   ITF Free Font Licence: free for commercial use, self-hosting
   explicitly permitted. No CDN dependency, no unlicensed mirror. */
@font-face{font-family:'Clash Display';src:url('fonts/ClashDisplay-300.woff2') format('woff2');font-weight:300;font-display:block;font-style:normal}
@font-face{font-family:'Clash Display';src:url('fonts/ClashDisplay-400.woff2') format('woff2');font-weight:400;font-display:block;font-style:normal}
@font-face{font-family:'Clash Display';src:url('fonts/ClashDisplay-500.woff2') format('woff2');font-weight:500;font-display:block;font-style:normal}
@font-face{font-family:'Clash Display';src:url('fonts/ClashDisplay-600.woff2') format('woff2');font-weight:600;font-display:block;font-style:normal}
@font-face{font-family:'Clash Display';src:url('fonts/ClashDisplay-700.woff2') format('woff2');font-weight:700;font-display:block;font-style:normal}

/* ---------- TeX Gyre, self-hosted ----------
   GUST e-foundry's TeX Gyre collection, under the GUST Font License —
   an LPPL-style free licence allowing use, modification and
   redistribution. Copyright string verified in the font binary;
   I did not fetch the licence document itself.
     TG Display = Adventor  (the ITC Avant Garde Gothic design)
     TG Sans    = Heros     (the Helvetica design)
     TG Mono    = Cursor    (the Courier design), bold only
   Subset to Latin + punctuation + currency: ~110KB for all five. */
@font-face{font-family:'TG Display';src:url('fonts/tg-display.woff2') format('woff2');font-weight:400;font-display:block;font-style:normal}
@font-face{font-family:'TG Display';src:url('fonts/tg-display-bold.woff2') format('woff2');font-weight:700;font-display:block;font-style:normal}
@font-face{font-family:'TG Sans';src:url('fonts/tg-sans.woff2') format('woff2');font-weight:400;font-display:block;font-style:normal}
@font-face{font-family:'TG Sans';src:url('fonts/tg-sans-bold.woff2') format('woff2');font-weight:700;font-display:block;font-style:normal}
@font-face{font-family:'TG Mono';src:url('fonts/tg-mono-bold.woff2') format('woff2');font-weight:700;font-display:block;font-style:normal}
/* Fragment Mono (SIL OFL). The mono carries every label, figure and chip
   on the page, so it has to pair with the body face rather than announce
   itself: Fragment is drawn on Helvetica's skeleton, which is the same
   skeleton as TG Sans, so the labels read as part of the typography
   instead of as terminal output. The Courier clone it replaced looked
   like a typewriter mock-up, and the DM family that followed is one of
   the faces every generated site reaches for. */
@font-face{font-family:'Fragment Mono';src:url('fonts/fragment-mono-400.woff2') format('woff2');font-weight:400;font-display:block;font-style:normal}

:root{
  /* ========== GROUND — dark is the default state ========== */
  --bf-void:        #050410;   /* page floor, deepest */
  --bf-ground:      #0c0a16;   /* standard section ground */
  --bf-ground-alt:  #080710;   /* alternate, for adjacency */
  --bf-raised:      #16112b;   /* ghost type, raised fills */
  --bf-line:        #241e3a;   /* hairline on dark */

  /* ========== INK on dark ========== */
  --bf-ink:         #f2f0f8;
  --bf-ink-soft:    #cabfe6;
  --bf-ink-dim:     #9a93b8;
  --bf-ink-mute:    #6c6590;

  /* ========== ACCENT — one purple, three jobs ========== */
  --bf-purple:      #7f52ef;   /* the brand. headings, dots, ticks */
  --bf-purple-deep: #7442e9;   /* pressed, borders, gradients end */
  --bf-purple-lift: #a483f5;   /* on-dark text that must stay legible */
  --bf-purple-haze: rgba(127,82,239,.22);  /* glows, nebula tint */

  /* ========== INVERTED — white is the interruption ========== */
  --bf-paper:       #fdfdfd;
  --bf-paper-ink:   #16171a;
  --bf-paper-dim:   #5e5f66;
  --bf-paper-line:  #e6e5ea;
  --bf-paper-tint:  rgba(127,82,239,.05);  /* the emphasised table column */

  /* ========== SEMANTIC ========== */
  --bf-alarm:       #e04035;   /* frozen funds, the problem state */
  --bf-settle:      #10a05e;   /* resolved, cleared */

  /* ========== GLASS — lilac-tinted, never grey ========== */
  --bf-glass:       rgba(203,191,255,.11);
  --bf-glass-soft:  rgba(203,191,255,.055);
  --bf-glass-line:  rgba(255,255,255,.09);
  --bf-glass-blur:  18px;

  /* ========== TYPE ========== */
  /* TeX Gyre is the default set. Clash Display is still installed and
     reachable with [data-type="clash"] on any ancestor — the swap is
     these three lines and nothing else. */
  --bf-display: 'TG Display', 'ITC Avant Garde Gothic', 'URW Gothic', 'Century Gothic', sans-serif;
  --bf-sans:    'TG Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bf-mono:    'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Cursor ships bold only — the one weight the reference uses. Anything
     asking for mono at 400 gets a synthesised face, so don't. */

  /* Display is always uppercase and always tight — that pairing IS the brand */
  --bf-display-track: -0.02em;
  --bf-display-lh:    0.9;

  /* Fluid scale, 1280 reference */
  --bf-t-hero:  clamp(2.6rem, 1.1rem + 5.4vw, 5.5rem);
  --bf-t-xl:    clamp(2.1rem, 1.2rem + 3.4vw, 3.9rem);
  --bf-t-lg:    clamp(1.6rem, 1.1rem + 2.0vw, 2.6rem);
  --bf-t-md:    clamp(1.15rem, 1.0rem + 0.7vw, 1.45rem);
  --bf-t-body:  clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  --bf-t-sm:    0.875rem;
  --bf-t-xs:    0.75rem;
  --bf-t-micro: 0.6875rem;   /* eyebrow / badge */

  /* ========== SPACE — 4px base ========== */
  --bf-s1:4px; --bf-s2:8px; --bf-s3:12px; --bf-s4:16px; --bf-s5:22px;
  --bf-s6:30px; --bf-s7:44px; --bf-s8:64px; --bf-s9:96px; --bf-s10:136px;
  --bf-section: clamp(72px, 9vw, 136px);   /* vertical section rhythm */
  --bf-gutter:  clamp(20px, 4vw, 56px);
  --bf-measure: 1240px;

  /* ========== RADII — only three ========== */
  --bf-r-card: 18px;
  --bf-r-lg:   22px;
  --bf-r-pill: 999px;

  /* ========== ELEVATION ========== */
  --bf-shadow-card: 0 24px 60px rgba(0,0,0,.55);
  --bf-shadow-lift: 0 30px 80px rgba(0,0,0,.6);
  --bf-glow:        0 0 42px -8px var(--bf-purple-haze);

  /* ========== MOTION — see 02 · motion.css ==========
     Two eases doing opposite jobs. This is the grammar of the
     reference: accelerate to leave, decelerate to arrive. */
  --bf-e-exit:   cubic-bezier(.55, 0, .75, .45);   /* accelerates away */
  --bf-e-arrive: cubic-bezier(.22, 1, .36, 1);     /* settles in */
  --bf-e-soft:   cubic-bezier(.25, .8, .3, 1);     /* supporting elements */
  --bf-e-quart:  cubic-bezier(.25, 1, .5, 1);      /* fade + lift, softer than arrive */
  --bf-e-shutter:cubic-bezier(.76, 0, .24, 1);     /* symmetric: wipes only */

  --bf-d-fast:   .18s;
  --bf-d-press:  .16s;
  --bf-d-mid:    .4s;
  --bf-d-exit:   .5s;
  --bf-d-settle: .55s;
  --bf-d-reveal: .7s;
  --bf-d-long:   1.05s;

  /* Uniform-scale stage: a 1280x800 composition scaled as one object, so
     nothing reflows above the breakpoint. Same device as the hero. */
  --bf-stage-w: 1280;
  --bf-stage-h: 800;
  --bf-u: min(calc(100vw / 1280), calc(100dvh / 800));

  /* Travel multiplier — entrance distances shrink on small screens, where
     the same pixel distance reads as a much larger gesture. */
  --bf-travel: 1;
}
@supports not (height: 100dvh){
  :root{ --bf-u: min(calc(100vw / 1280), calc(100vh / 800)); }
}
@media (max-width:510.98px){ :root{ --bf-travel:.75 } }

/* ---------- INVERTED SCOPE ----------
   Put [data-surface="paper"] on any section and every token that
   needs to flip, flips. Components never ask which surface they
   are on. */
[data-surface="paper"]{
  --bf-ground:     var(--bf-paper);
  --bf-ground-alt: var(--bf-paper);
  --bf-ink:        var(--bf-paper-ink);
  --bf-ink-soft:   var(--bf-paper-ink);
  --bf-ink-dim:    var(--bf-paper-dim);
  --bf-ink-mute:   var(--bf-paper-dim);
  --bf-line:       var(--bf-paper-line);
  --bf-purple-lift:var(--bf-purple);
  /* backdrop blur does nothing against white — flat fill instead */
  --bf-glass:      rgba(0,0,0,.04);
  --bf-glass-soft: rgba(0,0,0,.025);
  --bf-glass-line: var(--bf-paper-line);
  --bf-glass-blur: 0px;
  --bf-shadow-card: 0 18px 48px rgba(22,23,26,.10);
  --bf-shadow-lift: 0 26px 60px rgba(22,23,26,.14);
}


/* ---------- The previous set, still available ---------- */
[data-type="clash"]{
  --bf-display:'Clash Display', ui-sans-serif, system-ui, sans-serif;
  --bf-sans:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --bf-mono:'Fragment Mono', ui-monospace,'SF Mono',Menlo,monospace;
}