/* ============================================================
   BACKLIGHT — design tokens
   ------------------------------------------------------------
   Brand: Backlight Ventures (backlight.ventures)
   Tagline: "Lighting the path to success."
   Aesthetic: pure-black canvas, single point-source of light,
   wide neo-grotesque type, generous negative space.
   ============================================================ */

/* ---------- 1. Webfont
   GT America Extended (commercial, Grilli Type) is the brand
   face. We substitute Archivo (Google Fonts, wide grotesque)
   as the closest free match. SWAP IN GT AMERICA WHEN AVAILABLE.
   --------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============================================================
     COLOR — the system is deliberately tiny: one black, one
     white, and a handful of "dim white" alpha steps used as
     paragraph dim, footer dim, and ordinal-marker dim.
     ============================================================ */

  /* Surfaces ------------------------------------------------ */
  --bl-bg:           rgb(10, 10, 10);   /* canonical canvas, used on every slide */
  --bl-bg-pure:      rgb(0, 0, 0);      /* "void" black — brand/cover slides only */
  --bl-bg-elev:      rgb(16, 16, 16);   /* one tick up, e.g. faint elevated card */

  /* Foreground --------------------------------------------- */
  --bl-fg:           rgb(255, 255, 255);
  --bl-fg-dim-80:    rgba(255, 255, 255, 0.80);
  --bl-fg-dim-60:    rgba(255, 255, 255, 0.60); /* body on dark, secondary */
  --bl-fg-dim-40:    rgba(255, 255, 255, 0.40); /* eyebrow, footer mark */
  --bl-fg-dim-30:    rgba(255, 255, 255, 0.30); /* "backlight.ventures" footer */
  --bl-fg-dim-20:    rgba(255, 255, 255, 0.20); /* big ordinal markers 01–05 */
  --bl-fg-dim-10:    rgba(255, 255, 255, 0.10); /* hairline divider */
  --bl-fg-dim-06:    rgba(255, 255, 255, 0.06); /* card border */

  /* Mirror tokens (dark-on-light variant — rare, mostly print) */
  --bl-ink:          rgb(10, 10, 10);
  --bl-paper:        rgb(255, 255, 255);

  /* Semantic — Backlight is deliberately monochromatic. ONE
     chromatic accent slot exists for lines, icons, and ordinal
     markers in the pitch deck — nothing else. Choose between
     Lime (forward, energetic) or Sun (warm, grounded).
     Toggle by setting --bl-line on .slide or :root. */
  --bl-line-lime:  #B5E12D;   /* default, forward energy */
  --bl-line-sun:   #E8C849;   /* alternate, warm grounding */
  --bl-line:       var(--bl-line-lime);   /* the active accent */
  --bl-line-dim:   color-mix(in oklch, var(--bl-line) 35%, transparent);
  --bl-line-soft:  color-mix(in oklch, var(--bl-line) 18%, transparent);

  /* Legacy/back-compat: --bl-accent points to the brand light
     (pure white), not to the chromatic line color. */
  --bl-accent:       rgb(255, 255, 255);    /* the light itself */
  --bl-accent-glow:  rgba(255, 255, 255, 0.6);

  /* ============================================================
     SIGNATURE GLOW — the brand's only "effect". Every backlit
     element uses this exact triple-layer shadow. Do not edit.
     ============================================================ */
  --bl-glow-lg:
    0 0 60px 15px rgba(255, 255, 255, 0.60),
    0 0 10px  4px rgba(255, 255, 255, 1.00),
    0 4px  4px  0 rgba(0, 0, 0, 0.25);

  --bl-glow-md:
    0 0 40px 10px rgba(255, 255, 255, 0.50),
    0 0 6px   3px rgba(255, 255, 255, 1.00),
    0 2px  2px  0 rgba(0, 0, 0, 0.25);

  --bl-glow-sm:
    0 0 20px  5px rgba(255, 255, 255, 0.50),
    0 0 4px   2px rgba(255, 255, 255, 1.00);

  /* ============================================================
     TYPE — one family, four weights. All sizes use the same
     -0.030em tracking and 100% line-height for headlines.
     ============================================================ */
  --bl-font:       "Archivo", "GT America", "Helvetica Neue", system-ui, sans-serif;
  --bl-font-mono:  "JetBrains Mono", ui-monospace, monospace;

  /* Headline scale (slide-scale, 1920×1080) */
  --bl-display:    140px;   /* hero, full-slide statement */
  --bl-h1:          84px;   /* primary title */
  --bl-h2:          60px;   /* section title */
  --bl-h3:          48px;
  --bl-h4:          36px;   /* footer wordmark "backlight" */
  --bl-h5:          32px;   /* URL mark, eyebrow */
  --bl-h6:          24px;   /* body, list, caption */

  /* Document scale (web/print, ~1× of 1920px slide) */
  --bl-doc-display: 72px;
  --bl-doc-h1:      48px;
  --bl-doc-h2:      36px;
  --bl-doc-h3:      28px;
  --bl-doc-h4:      22px;
  --bl-doc-body:    16px;
  --bl-doc-small:   13px;

  /* Weights */
  --bl-w-light:    300;     /* display + h1 (default headline) */
  --bl-w-regular:  400;     /* body, ordinals, wordmark */
  --bl-w-medium:   500;     /* eyebrow, URL mark "backlight.ventures" */
  --bl-w-bold:     700;     /* used sparingly — emphasis in mission text */

  /* Tracking — universal */
  --bl-tracking:    -0.030em;
  --bl-tracking-wide: 0.02em;     /* uppercase eyebrows */

  /* Line heights */
  --bl-lh-tight:   1.0;     /* every headline */
  --bl-lh-snug:    1.07;    /* multi-line display */
  --bl-lh-body:    1.45;    /* paragraph */

  /* ============================================================
     SPACING — 4-pt grid. The deck uses very generous gutters;
     prefer 24 / 48 / 96 / 144 for slide-scale layouts.
     ============================================================ */
  --bl-s-1:   4px;
  --bl-s-2:   8px;
  --bl-s-3:  12px;
  --bl-s-4:  16px;
  --bl-s-5:  24px;
  --bl-s-6:  32px;
  --bl-s-7:  48px;
  --bl-s-8:  64px;
  --bl-s-9:  96px;
  --bl-s-10:144px;
  --bl-s-11:192px;

  /* Radii — the logo dot uses border-radius: 45% (slightly
     rounded squircle, sits between a square and a circle). The
     superellipse scale below is kept for cards, inputs, etc. */
  --bl-r-sm:    8px;
  --bl-r-md:   16px;
  --bl-r-lg:   24px;
  --bl-r-xl:   30px;
  --bl-r-dot:  45%;     /* the brand dot — squircle */
  --bl-r-full: 999px;

  /* Borders */
  --bl-border:  1px solid var(--bl-fg-dim-10);
  --bl-border-strong: 1px solid var(--bl-fg-dim-40);

  /* Motion */
  --bl-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --bl-ease-out:    cubic-bezier(0.0, 0, 0.2, 1);
  --bl-dur-fast:    160ms;
  --bl-dur-base:    280ms;
  --bl-dur-slow:    600ms;
  --bl-dur-glow:   1800ms;   /* slow breathing pulse on the dot */
}

/* ============================================================
   SEMANTIC HELPERS — drop into any HTML to inherit Backlight
   defaults. Always use over hand-rolled rules.
   ============================================================ */

.bl-canvas {
  background: var(--bl-bg);
  color: var(--bl-fg);
  font-family: var(--bl-font);
  letter-spacing: var(--bl-tracking);
  -webkit-font-smoothing: antialiased;
}

.bl-canvas-pure { background: var(--bl-bg-pure); }

.bl-display, .bl-h1, .bl-h2, .bl-h3, .bl-h4, .bl-h5, .bl-h6 {
  font-family: var(--bl-font);
  letter-spacing: var(--bl-tracking);
  line-height: var(--bl-lh-tight);
  margin: 0;
}

.bl-display { font-size: var(--bl-doc-display); font-weight: var(--bl-w-light); line-height: var(--bl-lh-snug); }
.bl-h1      { font-size: var(--bl-doc-h1);      font-weight: var(--bl-w-light); }
.bl-h2      { font-size: var(--bl-doc-h2);      font-weight: var(--bl-w-regular); }
.bl-h3      { font-size: var(--bl-doc-h3);      font-weight: var(--bl-w-regular); }
.bl-h4      { font-size: var(--bl-doc-h4);      font-weight: var(--bl-w-medium); }
.bl-h5      { font-size: var(--bl-doc-h5, 18px);font-weight: var(--bl-w-medium); }

.bl-eyebrow {
  font-family: var(--bl-font);
  font-size: var(--bl-doc-small);
  font-weight: var(--bl-w-medium);
  letter-spacing: var(--bl-tracking-wide);
  text-transform: uppercase;
  color: var(--bl-fg-dim-60);
}

.bl-body {
  font-family: var(--bl-font);
  font-size: var(--bl-doc-body);
  font-weight: var(--bl-w-regular);
  line-height: var(--bl-lh-body);
  letter-spacing: -0.005em;
  color: var(--bl-fg-dim-80);
}

.bl-mark {  /* "backlight" wordmark — bottom of every slide */
  font-family: var(--bl-font);
  font-weight: var(--bl-w-regular);
  letter-spacing: var(--bl-tracking);
}

.bl-url {  /* "backlight.ventures" — dim URL footer */
  font-family: var(--bl-font);
  font-weight: var(--bl-w-medium);
  letter-spacing: var(--bl-tracking);
  color: var(--bl-fg-dim-30);
}

.bl-ordinal { /* "01" big faint markers */
  font-family: var(--bl-font);
  font-weight: var(--bl-w-regular);
  letter-spacing: var(--bl-tracking);
  color: var(--bl-fg-dim-20);
  line-height: 1;
}

/* The signature backlight dot — squircle (border-radius 45%)
   with a multi-layer halo that gives the silhouette its
   "controluce" feeling. On dark surfaces, the dot is black and
   the halo is warm-white; on light surfaces, the dot is white
   and the halo is cool-dark. Use .bl-dot--on-light to invert. */
.bl-dot {
  --bl-dot-size: 56px;
  display: inline-block;
  width: var(--bl-dot-size);
  height: var(--bl-dot-size);
  border-radius: var(--bl-r-dot);
  background: rgb(0, 0, 0);
  box-shadow:
    0 0 22px 6px   rgba(255,255,255,0.28),
    0 0 52px 16px  rgba(255,255,255,0.20),
    0 0 100px 30px rgba(255,255,255,0.11),
    0 0 170px 52px rgba(255,250,235,0.07);
  flex-shrink: 0;
}
.bl-dot--on-light {
  background: rgb(255, 255, 255);
  box-shadow:
    0 0 22px 6px   rgba(20,20,28,0.34),
    0 0 52px 16px  rgba(20,20,28,0.20),
    0 0 100px 30px rgba(20,20,28,0.11),
    0 0 170px 52px rgba(20,20,28,0.06);
}

.bl-dot--sm { --bl-dot-size: 32px; }
.bl-dot--xs { --bl-dot-size: 18px; }

.bl-dot--breathing {
  animation: bl-breathe var(--bl-dur-glow) var(--bl-ease) infinite alternate;
}

@keyframes bl-breathe {
  from { opacity: 0.85; }
  to   { opacity: 1.00; }
}

.bl-hairline { border-top: var(--bl-border); height: 0; }

/* ============================================================
   CORNER LENS FLARE — the controluce of the deck
   ------------------------------------------------------------
   A natural sunburst / lens-flare anchored at one of the
   four corners of a slide. Set [data-corner="tl|tr|br|bl"]
   on the slide root, and set [data-bg="dark|light"] for the
   correct color treatment.

   Convention: lens flare appears ONLY at TR (forward sections)
   or BL (rooted sections) — the two visible diagonals.
   ============================================================ */
.bl-light {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  animation: bl-breathe var(--bl-dur-glow) var(--bl-ease) infinite alternate;
}
.bl-light .bl-flare {
  position: absolute;
  width: 1100px; height: 1100px;
  top: 0; left: 0;
  transform-origin: 0 0;
}
[data-corner="tl"] .bl-light .bl-flare { top:    0; left:    0; transform: none; }
[data-corner="tr"] .bl-light .bl-flare { top:    0; left: 100%; transform: scaleX(-1); }
[data-corner="br"] .bl-light .bl-flare { top: 100%; left: 100%; transform: scale(-1,-1); }
[data-corner="bl"] .bl-light .bl-flare { top: 100%; left:    0; transform: scaleY(-1); }

/* On DARK bg: warm-white flare (additive over black) */
[data-bg="dark"]  .bl-light .bl-flare { opacity: 0.95; }
/* On LIGHT bg: INVERTED — reads as a cool-dark gradient,
   the "shadow side" of the controluce */
[data-bg="light"] .bl-light .bl-flare {
  opacity: 0.55;
  filter: invert(1) hue-rotate(190deg) saturate(0.4) brightness(0.95);
  mix-blend-mode: multiply;
}