/* ---------------------------------------------------------------------------
   Design tokens for autobricks.ai: the "studio".

   The look is the original creators.autobricks.ai page's, a dark generative studio, in
   Autobricks' own two colours. A fixed container and fluid type, the way that page was
   built; not hexcore's viewport-scaled rem grid, which went with components.css.

   base.css is hexcore's and is copied verbatim by ../../sync-from-hexcore.ps1. It reads
   --font, --fs-body, --lh, --fs-h1, --lh-h1, --fs-sm, --header-h, --accent and
   --on-accent from here, and paints body with --ink on --paper; studio.css repaints body
   for the dark ground, so those two keep their plain meanings (ink is dark, paper light).
--------------------------------------------------------------------------- */
:root {
  /* Ground and panels */
  --ink: #0b0b12;
  --panel: #12121c;
  --panel2: #181826;
  --paper: #f7f7f4;
  --line: rgb(255 255 255 / 9%);
  --line2: rgb(255 255 255 / 16%);

  /* Type on ink. --mut is 72% white, about 9:1 on --ink; body copy never goes below it. */
  --txt: #f3f3f6;
  --mut: rgb(243 243 246 / 72%);
  --mut2: rgb(243 243 246 / 48%);

  /* The brand: the wordmark's red and blue, and the same two lifted so they read on ink. */
  --red: #e1251b;
  --blue: #2932e1;
  --red-l: #ff6a5e;
  --blue-l: #8f96ff;
  --violet: #6a3ad9;               /* the midpoint between them; gradient and glows only */

  /* The signature. One gradient, Bricks-red to AI-blue, through the violet between them.
     Used for the headline word, the primary button, the icon glows and the CTA halo. */
  --grad: linear-gradient(100deg, #e1251b 0%, #b8308f 40%, #6a3ad9 70%, #2932e1 100%);

  /* Hexcore's lime: the "to Hexcore Labs" button and the "Part of Hexcore Labs" dot, only. */
  --lime: #aaff00;

  /* What base.css reads for focus rings and the skip link. */
  --accent: var(--blue-l);
  --on-accent: #0b0b12;

  --font: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-h: 'Sora', 'Montserrat', 'Segoe UI', sans-serif;

  /* Fluid type. Headings are Sora, tight; body is Montserrat. */
  --fs-h1: clamp(38px, 5.4vw, 64px);
  --fs-h2: clamp(28px, 4vw, 46px);
  --fs-h3: clamp(18px, 1.5vw, 21px);
  --fs-body: clamp(16px, 1.15vw, 18px);
  --fs-lead: clamp(16px, 1.5vw, 19px);
  --fs-sm: 14px;
  --fs-xs: 12.5px;
  --lh: 1.6;
  --lh-h1: 1.05;

  /* Layout */
  --wrap: 1200px;
  --gutter: 24px;
  --header-h: 72px;
  --radius: 20px;
  --radius-sm: 12px;
  --section: clamp(64px, 8vw, 110px);
}

/* The two typefaces, one variable file each. Live here rather than in base.css because
   base.css is shared and must not name a font file. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}