/* Founders Hub design tokens v1 - 2026-08-06
   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.

   v1 changes the energy, not the brand. Direction reference: kilo.co.
   Blue is now used as a full ground, not only as a thin accent, which
   overrides the "blue never exceeds a fifth of the screen" rule in
   design-system v0 section 2. That rule came from the social mockups and
   does not survive contact with a landing page. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=Michroma&family=Inter: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." They are used in exactly one place on this
     page, the event type tags, where four distinguishable categories are a
     real functional need. 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);
  --fh-scrim-0:     rgba(25, 26, 28, 0);
  --fh-scrim-1:     rgba(25, 26, 28, 0.72);

  /* ---- 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.
     mega    = the statement face. Fat, condensed, uppercase, negative tracking.
     display = the brand's techno face. Small technical labels only, where its
               width is a feature instead of a problem.
     body    = everything a person actually reads. */
  --fh-font-mega:    'Archivo', 'Arial Narrow', sans-serif;
  --fh-font-display: 'Michroma', 'Aldrich', sans-serif;
  --fh-font-body:    'Inter', 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. */
  --fh-size-mega:      clamp(56px, 11vw, 168px);
  --fh-size-statement: clamp(38px, 6.4vw, 104px);
  --fh-size-number:    clamp(44px, 7vw, 116px);
  --fh-size-h2:        clamp(26px, 3vw, 44px);
  --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-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;
  --fh-gutter:      var(--fh-space-4);

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

  --fh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@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;
  }
}