/* ==========================================================================
   ABBA Marketing — Design tokens
   All values are lifted 1:1 from the mobile design reference (390px).
   ========================================================================== */

/* ---- Fonts: Manrope (local woff2 subsets, variable 200–800) --------------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-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: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-greek.woff2") format("woff2");
  unicode-range:
    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-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;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-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: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-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;
}

:root {
  /* ---- Colors -------------------------------------------------------------- */
  --c-body: #eef0f4; /* outside page bg */
  --c-page: #fff; /* page surface */
  --c-ink: #0f1a26; /* primary text */
  --c-accent: #2f6fe4; /* brand blue */
  --c-accent-hover: #1f56b8; /* brand blue hover */
  --c-footer: #16283a; /* footer bg */
  --c-form-bg: #f6f7f9; /* form section bg */
  --c-border: #e6e8ec; /* hairline borders */
  --c-muted: #7b8794; /* muted text */
  --c-muted-2: #6b7684; /* muted text (form) */
  --c-muted-3: #8b95a3; /* menu subtext */
  --c-placeholder: #9aa4b2; /* input placeholder */
  --c-label: #4a5563; /* input labels */
  --c-brand-plate: #5c6672; /* marquee text */
  --c-error: #c0392b; /* form error */
  --c-hero-fallback: #0b1420; /* hero dark base */
  --c-input-border: #d6dae0; /* input border */

  /* ---- Header (floating pill, scrolled state) ----------------------------- */
  --header-scrolled-bg: rgba(255, 255, 255, 0.95);
  --header-scrolled-blur: blur(16px) saturate(160%);
  --header-scrolled-shadow: 0 10px 28px rgba(8, 18, 30, 0.16);
  --chrome-color-top: #fff;
  --chrome-color-scrolled: #24303d;
  --chrome-border-top: rgba(255, 255, 255, 0.3);
  --chrome-border-scrolled: rgba(15, 26, 38, 0.16);

  /* ---- Type --------------------------------------------------------------- */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Radii -------------------------------------------------------------- */
  --r-pill: 999px;
  --r-card: 18px;
  --r-panel: 22px;
  --r-plate: 14px;
  --r-menu-item: 14px;

  /* ---- Overlays / gradients ----------------------------------------------- */
  --grad-card: linear-gradient(to top, rgba(6, 12, 20, 0.8), transparent);

  /* ---- Layout ------------------------------------------------------------- */
  --page-max: 390px; /* mobile design width */
}