/* Design tokens from Figma "Concept v2". Every other stylesheet reads these; do not hardcode colours or type sizes. */
@font-face{font-family:"Be Vietnam Pro";src:url("../fonts/BeVietnamPro-Regular.woff2") format("woff2"),url("../fonts/BeVietnamPro-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../fonts/BeVietnamPro-Medium.woff2") format("woff2"),url("../fonts/BeVietnamPro-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../fonts/BeVietnamPro-SemiBold.woff2") format("woff2"),url("../fonts/BeVietnamPro-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../fonts/BeVietnamPro-Bold.woff2") format("woff2"),url("../fonts/BeVietnamPro-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../fonts/BeVietnamPro-ExtraBold.woff2") format("woff2"),url("../fonts/BeVietnamPro-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("../fonts/BeVietnamPro-Black.woff2") format("woff2"),url("../fonts/BeVietnamPro-Black.ttf") format("truetype");font-weight:900;font-display:swap}

:root{
  --c-cream:#fffaf3;
  /* Round 5: the header is brand cream (the old #FCFDEF read as a grey-green tint). */
  --c-header:#fffaf3;
  /* The mint #f1fcdb is retired (client, 24 Sep: "bỏ màu mint"; only the 5 Guideline colours). The token now resolves to
     warm cream so any leftover use stays on-brand; new code must not use it. */
  --c-lime-50:#e4fcb6;
  --c-lime:#d9fd9c;
  --c-lime-glow:217,253,156;
  /* Brand Guideline has one green: olive #92B93C. The darker #4d7a12 from the Figma concept is retired (client, 24 Sep). */
  --c-green:#92b93c;
  --c-green-rgb:146,185,60;
  --c-green-soft:#92b93c;
  /* Accent-only shade of the olive (client: other tones of the 4 main colours are allowed as small accents). Used for
     a few large display words on light surfaces, e.g. "The Metaphoric Mind" in the home audience heading. 4.1:1 on cream. */
  --c-green-deep:#617f22;
  /* Client, 24 Sep: no yellow accents — every former warm-cream surface/accent is the brand lime. */
  --c-cream-warm:#e4fcb6; /* lime at ~70% over cream (client: lime backgrounds ~30% transparent) */
  --c-ink:#32231f;
  --c-ink-rgb:50,35,31;
  --c-white:#ffffff;
  --c-line:rgba(50,35,31,.12);

  --font:"Be Vietnam Pro",Arial,sans-serif;

  /* Mobile-first type scale (390): eyebrow 14, H1 36 (tablet 44, desktop 56; always ≥ H2), H2 28, body 15, card head 19, roadmap title 18 / desc 14 */
  --fs-eyebrow:14px;
  --fs-h1:36px;
  --fs-h2:28px;
  --fs-h3:19px;
  --fs-body:15px;
  --fs-small:14px;
  --fs-roadmap-title:18px;
  --fs-roadmap-desc:14px;

  --gutter:20px;
  --section-y:48px;
  --heading-gap:28px;
  --container:1280px;
  /* Client, 24 Sep: cards ~22px everywhere. */
  --radius-card:22px;
  --radius-sm:12px;
  --radius-pill:999px;
  --header-h:72px;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* Round 5 motion (research P1): damped springs as CSS linear() curves. --spring (zeta .72, ~4% overshoot) runs over
     --dur-spring; --spring-snappy (zeta .85, no visible overshoot) over --dur-snappy. --ease-out-quick is the 80ms "press
     in". Browsers without linear() drop the declaration and fall back to the default ease. */
  --spring:cubic-bezier(.62,.05,.3,1); /* round 6b: ease-in-out, no overshoot (client) */
  --spring-snappy:cubic-bezier(.55,.05,.3,1);
  --ease-out-quick:cubic-bezier(.2,.9,.3,1);
  --dur-spring:480ms;
  --dur-snappy:320ms;
  --dur-press:80ms;
}
/* Tablet (768): eyebrow 16, H2 34, body 16, card head 22, roadmap 22 / 15 */
@media (min-width:768px){
  :root{--fs-eyebrow:16px;--fs-h1:44px;--fs-h2:34px;--fs-h3:22px;--fs-body:16px;--fs-roadmap-title:22px;--fs-roadmap-desc:15px;--gutter:40px;--section-y:64px;--heading-gap:36px}
}
/* Desktop (client, 24 Sep: "tỉ lệ hơi to… scale một chút… nhiều khoảng hở ở 2 bên để trông đắt tiền hơn").
   Figma's 1440 sizes (h2 60, body 20) are scaled to ~0.8 and the content column is capped at 1120px with a fluid gutter,
   so every desktop width keeps generous side margins (1280 → ~96px, 1440 → 160px, 1920 → 400px) and more vertical air. */
@media (min-width:1200px){
  :root{--fs-eyebrow:16px;--fs-h1:56px;--fs-h2:46px;--fs-h3:23px;--fs-body:17px;--fs-small:15px;--fs-roadmap-title:23px;--fs-roadmap-desc:16px;--gutter:clamp(64px,7.5vw,160px);--container:1120px;--section-y:112px;--heading-gap:48px;--header-h:88px}
}