/* ---------------------------------------------------------------------------
   Design tokens, reverse-engineered from the live Wix site's computed styles.

   Wix Studio authors at a fixed design width and scales every length linearly
   with the viewport, capping at the design width. Reproducing that exactly is
   one line: make the root font-size a function of viewport width and express
   every length in rem. At the design width 1rem === 16px, so a token's rem
   value is just "design pixels / 16".

   Measured anchors (see _capture/styles/*.json):
     1920px  desktop design width   h1 97.5px   body 30px   nav 21px
     2560px  identical to 1920      -> the scale caps at 1920
      834px  tablet
      390px  mobile design width    h1 28px     body 18px   nav 14px
--------------------------------------------------------------------------- */

html {
  font-size: calc(min(100vw, 1920px) / 1920 * 16);
}

:root {
  /* Brand palette, exact values read off the live site */
  --ink: #000000;
  --paper: #fffcf8;      /* rgb(255, 252, 248), page background */
  --lime: #aaff00;       /* rgb(170, 255, 0)  , primary CTA */
  --cyan: #4efbf0;       /* rgb(78, 251, 240) , arena panel */
  --lilac: #dacaff;      /* rgb(218, 202, 255), arena panel */
  --ice: #d7f8ff;        /* rgb(215, 248, 255) */

  --font: 'Questrial', 'Century Gothic', 'Avenir Next', 'Segoe UI', sans-serif;

  /* Type scale, desktop, design pixels in the comment */
  --fs-nav: 1.3125rem;      /* 21   */
  --fs-eyebrow: 2.8125rem;  /* 45   */
  --fs-h1: 6.09375rem;      /* 97.5 */
  --fs-display: 4.6875rem;  /* 75   */
  --fs-h3: 4.21875rem;      /* 67.5 */
  --fs-h2: 3.28125rem;      /* 52.5 */
  --fs-card: 2.625rem;      /* 42   */
  --fs-h2-sm: 2.25rem;      /* 36   */
  --fs-item: 2.0625rem;     /* 33   */
  --fs-body: 1.875rem;      /* 30   */
  --fs-sm: 1.59375rem;      /* 25.5 */
  --fs-cta: 1.51778rem;     /* 24.28, header WhatsApp button */

  /* Every text style on the site is line-height 1.4 except these two. */
  --lh: 1.4;
  --lh-h1: 1.25;
  --lh-display: 1.2;

  /* Layout */
  --gutter: 3.75rem;        /* 60 , header/footer side padding */
  --header-h: 8.625rem;     /* 138 */
  --radius: 0.9375rem;      /* 15 , buttons and panels */
  --content: 96rem;         /* 1536 = 80% of 1920, the main content column */
}

/* ---------------------------------------------------------------------------
   Autobricks.

   Measured the same way the values above were, but from a different source:
   autobricks/Autobricks_Demo_Deck_v3_2.pdf, counting how many colour operators
   in the deck set each value. autobricksai.com is out of date and is NOT the
   reference. Nothing above this line changes.

   The two palettes turn out to be the same idea, a warm neutral ground and one
   electric accent, which is why co-branding costs so little here. The ground
   stays Hexcore's; indigo is the signal that you are reading Autobricks' half.

   Scope discipline, because it is what keeps the site looking like itself:
   --lime stays the accent of record everywhere (CTAs, :focus-visible), and
   --ab-indigo / --ab-red are only ever referenced from inside .ab.
--------------------------------------------------------------------------- */
:root {
  --ab-ink: #16150f;      /* warm near-black    411 uses in the deck */
  --ab-grey: #55524b;     /*                    382 */
  --ab-grey-2: #6e6a63;   /*                    334 */
  --ab-line: #e3e0d9;     /* borders and fills  236 */
  --ab-indigo: #2a2dd9;   /* primary accent     166 */
  --ab-red: #e5251d;      /* secondary accent   127 */
  --ab-paper: #f7f6f3;    /* warm off-white      18 */

  /* There was a monospace label voice here too, taken from how the deck sets
     "AUTOBRICKS.AI". It has gone: on the page it was the one thing that did not
     look like the rest of the site. Autobricks' half of the co-brand is the
     indigo and nothing else; the type is Hexcore's throughout, Questrial on the
     measured scale above, eyebrows uppercase at 0.1em like .hero__eyebrow. */
}

/* Tablet: 750–999px. Anchored on the 834px capture. */
@media (max-width: 999px) {
  html { font-size: calc(100vw / 834 * 16); }
  :root {
    --fs-nav: 1.5705rem;
    --fs-eyebrow: 1.5705rem;
    --fs-h1: 3.141rem;
    --fs-display: 2.4680rem;
    --fs-h3: 2.8045rem;
    --fs-h2: 2.1rem;
    --fs-card: 1.75rem;
    --fs-h2-sm: 1.5rem;
    --fs-item: 1.375rem;
    --fs-body: 2.0192rem;
    --fs-sm: 1.25rem;
    --fs-cta: 1.25rem;
    --gutter: 2.5rem;
    --header-h: 5.5rem;
    --content: 46rem;
  }
}

/* Mobile: below 750px. Anchored on the 390px capture, where Wix's authored
   values are clean integers. */
@media (max-width: 749px) {
  html { font-size: calc(100vw / 390 * 16); }
  :root {
    --fs-nav: 0.875rem;      /* 14 */
    --fs-eyebrow: 0.875rem;  /* 14 */
    --fs-h1: 1.75rem;        /* 28 */
    --fs-display: 1.375rem;  /* 22 */
    --fs-h3: 1.5625rem;      /* 25 */
    --fs-h2: 1.25rem;        /* 20 */
    --fs-card: 1.125rem;     /* 18 */
    --fs-h2-sm: 1rem;        /* 16 */
    --fs-item: 0.9375rem;    /* 15 */
    --fs-body: 1.125rem;     /* 18 */
    --fs-sm: 0.9375rem;      /* 15 */
    --fs-cta: 0.875rem;      /* 14 */
    --gutter: 1.25rem;       /* 20 */
    --header-h: 3.75rem;     /* 60 */
    --radius: 0.5rem;
    --content: 21.875rem;    /* 350 */
  }
}