/* BadgeBox landing tokens.
   Source of truth: desk/css_2_0/style_bbx_primitives.css — the values here are
   copied from there, not reinterpreted. If they change in the product, they change here.
   The landing does not introduce a second accent: blue and nothing else. */

:root {
    /* --- brand blue -------------------------------------------------- */
    --bbx-blue-50:  #ebf5ff;
    --bbx-blue-100: #cce5ff;
    --bbx-blue-200: #99ccff;
    --bbx-blue-300: #5cb3ff;
    --bbx-blue-400: #2999fa;
    --bbx-blue-500: #0080f6;
    --bbx-blue-600: #0069cc;
    --bbx-blue-700: #0055a3;
    --bbx-blue-800: #003f7a;
    --bbx-blue-900: #002952;

    /* --- cool grays -------------------------------------------------- */
    --bbx-gray-25:  #fbfcfd;
    --bbx-gray-50:  #f6f8fa;
    --bbx-gray-100: #eef1f5;
    --bbx-gray-150: #e4e8ee;
    --bbx-gray-200: #d6dbe3;
    --bbx-gray-300: #b7bfcb;
    --bbx-gray-400: #8b95a4;
    --bbx-gray-500: #616b7b;
    --bbx-gray-600: #434b59;
    --bbx-gray-700: #2f3642;
    --bbx-gray-800: #1f2530;
    --bbx-gray-900: #141920;

    /* --- roles -------------------------------------------------------- */
    --lp-accent:        var(--bbx-blue-500);
    --lp-accent-press:  var(--bbx-blue-600);
    /* The step below: needed where the fill already STARTS from -press and
       still has to darken on hover — the two cookie banner buttons, which carry
       small white text and did not reach the minimum contrast with the light
       accent. It is named by role, not by hue: if the accent changes one day,
       all three change together. */
    --lp-accent-deep:   var(--bbx-blue-700);
    --lp-accent-tint:   var(--bbx-blue-50);
    --lp-ink:           var(--bbx-gray-800);
    --lp-ink-soft:      var(--bbx-gray-500);
    --lp-ink-invert:    #ffffff;
    --lp-border:        var(--bbx-gray-150);
    --lp-surface:       #ffffff;
    --lp-page:          var(--bbx-gray-50);
    --lp-dark:          var(--bbx-blue-900);   /* background of the blocks that stand out */
    /* «done»: the signature stamp. From the primitives, --bbx-success-*. */
    --lp-ok-ink:        #0a6e52;
    --lp-ok-soft:       #e8f6ed;

    /* --- shape -------------------------------------------------------- */
    --lp-radius-control: 8px;
    --lp-radius-card:    16px;
    --lp-radius-pill:    999px;

    /* Barely visible shadows: the borders separate, not the shadows. */
    --bbx-shadow-sm: 0 1px 2px rgba(15, 26, 46, 0.05);
    --bbx-shadow-md: 0 2px 6px rgba(15, 26, 46, 0.06), 0 1px 2px rgba(15, 26, 46, 0.04);
    --bbx-shadow-lg: 0 8px 24px rgba(15, 26, 46, 0.08), 0 2px 6px rgba(15, 26, 46, 0.04);

    /* --- the AI assistant's motion (primitives §AI): the white sheen that
       crosses what belongs to the assistant, and its pace. Motion, not a
       colour: the landing's only accent stays the blue. ----------------- */
    --bbx-ai-sheen:     linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    --bbx-ai-t-idle:    4.6s;
    --bbx-ai-t-hover:   1.6s;
    --bbx-ai-t-twinkle: 3.2s;
    --bbx-ai-ease:      ease-in-out;

    /* --- typography ---------------------------------------------------- */
    --bbx-font-sans: "Hanken Grotesk", -apple-system, system-ui, sans-serif;

    /* --- space: 4px grid ----------------------------------------------- */
    --lp-1:  4px;  --lp-2:  8px;  --lp-3: 12px;  --lp-4: 16px;
    --lp-5: 24px;  --lp-6: 32px;  --lp-7: 48px;  --lp-8: 64px;
    --lp-9: 96px;  --lp-10: 128px;

    --lp-shell:   1200px;   /* maximum content width */
    --lp-gutter:  24px;
}

@media (max-width: 640px) {
    :root { --lp-gutter: 20px; }
}

/* ── THE TYPEFACE ─────────────────────────────────────────────────────────
   Hanken Grotesk, served from here and not from fonts.googleapis.com: that
   sheet was a connection to a third-party domain that held the page for
   750 ms before drawing anything. Now the file comes over the same
   connection as the HTML, and the header preloads it.

   One file per subset, and they are variable: weight 400 and 800 live in
   the same file, which is why `font-weight` is a range. The unicode-ranges
   decide what gets downloaded — an Italian page takes only latin (34 KB),
   a Polish one latin-ext as well. Do not touch them by hand: they are
   copied from Google and recorded in assets/font/PROVENIENZA.txt.

   `swap`: the text reads right away in the system font and switches when
   the file arrives. With the font on the same connection the window is so
   short it is barely visible — but «barely» beats a blank page. */
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../assets/font/hanken-grotesk-v12-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: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../assets/font/hanken-grotesk-v12-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../assets/font/hanken-grotesk-v12-cyrillic-ext.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Hanken Grotesk';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../assets/font/hanken-grotesk-v12-vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}