/* Founders Hub design tokens v2 - 2026-08-20
   THIS IS THE ONLY FILE WHERE COLOURS, FONTS AND SIZES ARE ALLOWED TO LIVE.

   Colours are the designer's real brandbook values, received 2026-08-06.
   The site runs the brandbook's DARK MODE, which means SKY is the working
   blue and SEA is the deep one. Getting this backwards is the single easiest
   way to make the page look off brand.

   v2 implements direction D "Plakatas". The composition changed, the palette
   did not. What v2 adds is the alpha and size vocabulary the overlapping
   planes need, so site.css can lay out a poster without inventing a colour.

   Colour proportions are binding, brandbook section 2, dark theme:
   NIGHT 40 percent, SKY 20, WHITE 13, SEA 12, and 5 percent each for
   turquoise, spark and mustard. The three accents are marks only: chips,
   rules, squares and bars. Never the ground of a large area. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Audiowide&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brandbook, exact ---- */
  --fh-white:     #FFFFFF;
  --fh-sky:       #7FBAF4;  /* the working blue on dark. Accents, numbers, labels */
  --fh-sea:       #2774C1;  /* the deep blue. Grounds and halftone, not small text */
  --fh-mustard:   #E9C46A;
  --fh-spark:     #E76F51;
  --fh-turquoise: #249D8F;
  --fh-night:     #191A1C;

  /* Secondary three are deliberately parked. Designer: "mustard spark ir
     turquoise retai kur prireiks, bet jeigu prireiktu, kad butu is ko rinktis
     ir neieskot random spalvu." On this page they label event types, mark the
     three points, and cut the FAQ registers. All of those are marks. Do not
     promote them to grounds. */

  /* ---- Derived. Everything below is computed from the brandbook, never invented. ---- */
  --fh-night-2:     #212327;              /* lifted NIGHT, the second dark ground */
  --fh-grey:        #9A9DA3;              /* muted text on NIGHT */
  --fh-line:        rgba(255, 255, 255, 0.16);
  --fh-line-dark:   rgba(25, 26, 28, 0.20);
  --fh-blue-wash:   rgba(127, 186, 244, 0.12);
  --fh-glass:       rgba(25, 26, 28, 0.86);

  /* Alpha steps the plane composition needs. Text on a light plane, dividers
     inside an open row, and the hatch that stands in for photography until
     the shoot lands. */
  --fh-ink-74:      rgba(25, 26, 28, 0.74);
  --fh-ink-28:      rgba(25, 26, 28, 0.28);
  --fh-ink-12:      rgba(25, 26, 28, 0.12);
  --fh-white-82:    rgba(255, 255, 255, 0.82);
  --fh-white-34:    rgba(255, 255, 255, 0.34);
  /* The floating header ground. Translucent enough that the page moves
     underneath it and opaque enough that white type holds over the halftone,
     which is the surface it crosses most often. */
  --fh-night-72:    rgba(25, 26, 28, 0.72);
  --fh-hatch-ink:   rgba(25, 26, 28, 0.09);
  --fh-hatch-sky:   rgba(127, 186, 244, 0.16);

  /* Icons. The set ships as a two tone duo: a solid mass plus a blue accent.
     Inlined SVG only, so these variables reach them. */
  --fh-icon-base:   var(--fh-white);
  --fh-icon-accent: var(--fh-sky);

  /* The same artwork used large and faint as section watermark. Two sets,
     because a watermark on a dark ground and one on the SKY band cannot be
     the same colour. */
  --fh-art-sky:        rgba(127, 186, 244, 0.16);
  --fh-art-sky-accent: rgba(127, 186, 244, 0.30);
  --fh-art-ink:        rgba(25, 26, 28, 0.20);
  --fh-art-ink-accent: rgba(25, 26, 28, 0.34);

  /* ---- Role aliases. Components reference these, never the brandbook names,
          so a palette change stays a one line edit. ---- */
  --fh-ink:        var(--fh-night);
  --fh-ink-2:      var(--fh-night-2);
  --fh-black:      var(--fh-night);
  --fh-blue:       var(--fh-sky);         /* dark mode: SKY is the working blue */
  --fh-blue-deep:  var(--fh-sea);

  /* Fonts. Resolved 2026-08-11 against the official brandbook.

     The brandbook carries two faces, Audiowide and DM Sans, and its explicit
     HEADER / Subheader / body panel is DM Sans. Audiowide is the logotype and
     display face. Nothing in it asks for Audiowide on headings, so the earlier
     "brandbook says Audiowide, site says Archivo" conflict was a misreading.

     mega    = the statement face. Fat, condensed, uppercase, negative tracking.
               The one deliberate deviation: the brandbook's own header face is
               DM Sans, which at 104px has no poster weight. Measured in a
               1232px column, Archivo 900 at 78% sets "BUILT BY STUDENTS" in
               867px against 950px for DM Sans 900 and 1219px for Audiowide,
               so Archivo is what lets a statement stay one line.
     display = Audiowide, the brandbook display face, on small labels only,
               where its width is a feature instead of a problem. It runs 16%
               narrower than the Michroma it replaces, so tracking stays 0.08em.
     body    = DM Sans, the brandbook body face. Everything a person reads. */
  --fh-font-mega:    'Archivo', 'Arial Narrow', sans-serif;
  --fh-font-display: 'Audiowide', 'Aldrich', sans-serif;
  --fh-font-body:    'DM Sans', system-ui, sans-serif;

  --fh-mega-weight:  900;
  --fh-mega-width:   78%;
  --fh-mega-track:  -0.03em;
  --fh-track-display: 0.08em;

  /* Type scale. Fluid, because the whole point is that it gets big.
     The two fold sizes are separate from the rest of the scale: the lockup
     sets ISM small over FOUNDERS HUB large, which is one composition rather
     than two steps of a scale. */
  --fh-size-fold-sm:   clamp(30px, 6.6vw, 96px);
  --fh-size-fold-lg:   clamp(46px, 11.1vw, 160px);
  --fh-size-mega:      clamp(56px, 11vw, 168px);
  --fh-size-statement: clamp(38px, 6.4vw, 104px);
  --fh-size-kicker:    clamp(24px, 3.1vw, 44px);   /* a demoted section title */
  --fh-size-claim:     clamp(23px, 2.7vw, 38px);   /* the sentence that carries a section */
  --fh-size-row:       clamp(18px, 1.6vw, 22px);   /* a disclosure row title */
  --fh-size-h3:        20px;
  --fh-size-body:      17px;
  --fh-size-small:     14px;
  --fh-size-micro:     12px;

  /* Spacing, base unit 8px */
  --fh-space-1:  8px;
  --fh-space-2:  16px;
  --fh-space-3:  24px;
  --fh-space-4:  32px;
  --fh-space-5:  40px;
  --fh-space-6:  48px;
  --fh-space-8:  64px;
  --fh-space-12: 96px;
  --fh-space-16: 128px;

  /* Shape. Square on purpose. Rounded corners were most of what made v0
     read as a template. */
  --fh-radius:      0px;
  --fh-radius-btn:  0px;
  --fh-content-max: 1280px;
  /* Header geometry. The inset is what detaches the bar from the frame, and
     scroll-padding is derived from both so an anchor never lands underneath. */
  --fh-header-h:     64px;
  --fh-header-inset: clamp(10px, 1.2vw, 18px);
  --fh-gutter:      var(--fh-space-4);

  /* Texture */
  --fh-grain-opacity: 0.04;
  --fh-dot:           17px;

  /* Composition. The band padding and the shear depths are tokens because the
     poster reads off them and the phone layout has to shrink them together. */
  --fh-band-pad:    clamp(72px, 8vw, 128px);
  --fh-shear-top:    42px;
  --fh-shear-bottom: 96px;
  /* How far each disclosure row steps right. Grows from 0 at 900px to 24px
     at 1380px, so the staircase exists on desktop and disappears on a phone
     without a second breakpoint to keep in sync. */
  --fh-step: clamp(0px, calc((100vw - 900px) * 0.05), 24px);

  --fh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Motion. Two durations only. FAST is every state change the cursor causes
     and every disclosure open, and it is deliberately short: Rokas asked for
     smooth but quick, not for a reveal you wait on. SLOW is reserved for the
     header, which travels further. */
  --fh-motion-fast: 190ms;
  --fh-motion-slow: 320ms;
}

@media (max-width: 768px) {
  :root {
    --fh-size-body: 16px;
    --fh-space-12:  64px;
    --fh-space-16:  72px;
    --fh-gutter:    var(--fh-space-3);
    --fh-dot:       12px;
    --fh-shear-top:    18px;
    --fh-shear-bottom: 34px;
  }
}