html {
  background-color: #00121A !important;
}
/* ============================================================================
   BIBIAM — DESIGN TOKENS  ·  v2.0 (đồng bộ bibiam.com)  + AVA
   The single source of truth for the brand. Every page links this file first,
   then components.css. Never hard-code a color, size or easing in a page —
   reference a token. If a value isn't here, add it here, not in the page.

   Fonts: Be Vietnam Pro (300–800) + IBM Plex Mono — giống bibiam.com.
   ============================================================================ */

:root{
  --cta:#00A3A3; --cta-hover:#3FE0D0; --on-cta:#00121A;   /* nút chính giống bibiam.com */

  /* ---------- COLOR · DEEP (deep teal-green bands) ---------------------- */
  --ink:        #00121A;   /* deep teal-green — used only for accent bands  */
  --ink-800:    #062029;   /* elevated deep band                            */
  --ink-700:    #0A222A;   /* card / hover on deep                          */
  --ink-600:    #12313A;   /* highest elevation on deep                     */

  /* ---------- COLOR · PAPER (light surfaces — PRIMARY) ------------------ */
  --paper:      #F3F6F7;   /* primary light background (soft sage)          */
  --paper-2:    #FFFFFF;   /* secondary light background                    */
  --paper-card: #FFFFFF;   /* cards / panels on light                       */

  /* ---------- COLOR · ACCENT (single teal-green) ----------------------- */
  --brass:      #007A7A;   /* deep teal — accent on light: rules, marks, CTA*/
  --brass-2:    #3FE0D0;   /* bright teal — hovers, accent text on deep band*/

  /* ---------- COLOR · TEXT ---------------------------------------------- */
  --on-ink:       #F2F7F7; /* primary text on deep band                     */
  --on-ink-mute:  #9DB3B8; /* secondary text on deep band                   */
  --on-paper:     #00121A; /* primary text on light (deep teal-ink)         */
  --on-paper-mute:#44585E; /* secondary text on light                       */

  /* ---------- COLOR · HAIRLINES ----------------------------------------- */
  --line-d:    rgba(255,255,255,.08); /* divider on deep band               */
  --line-d-2:  rgba(255,255,255,.18); /* stronger divider / border on deep  */
  --line-l:    rgba(0,18,26,.10);    /* divider on light                   */
  --line-l-2:  rgba(0,18,26,.18);    /* stronger divider / border on light */

  /* ---------- TYPEFACES -------------------------------------------------- */
  --f-disp:'Be Vietnam Pro',system-ui,sans-serif;             /* display / editorial   */
  --f-ui:'Be Vietnam Pro',system-ui,sans-serif;/* body / UI             */
  --f-mono:'IBM Plex Mono',ui-monospace,monospace; /* eyebrows / data / code*/

  /* ---------- TYPE SCALE (fluid) ---------------------------------------- */
  --fs-display:  clamp(44px,7.4vw,104px); /* homepage hero only            */
  --fs-page:     clamp(36px,5.4vw,72px);     /* subpage hero (h1)             */
  --fs-h-l:      clamp(30px,4.4vw,58px);   /* section heading               */
  --fs-h-m:      clamp(24px,3vw,38px);     /* sub-section heading           */
  --fs-quote:    clamp(28px,4.4vw,58px);   /* manifesto / pull-quote        */
  --fs-lead:     clamp(22px,2.4vw,30px);   /* lead paragraph                */
  --fs-body-lg:  clamp(17px,1.5vw,21px);   /* intro / large body            */
  --fs-body:     16px;                     /* base body                     */
  --fs-small:    14px;                     /* captions, card body           */
  --fs-eyebrow:  12px;                     /* mono eyebrow / labels         */

  /* type rhythm */
  --lh-tight: 1.06;   --lh-display: 1.14;   --lh-body: 1.6;
  --ls-tight: -.03em; --ls-mono: .18em;

  /* ---------- LAYOUT ----------------------------------------------------- */
  --maxw:   1280px;                  /* content max width                   */
  --gut:    clamp(20px,5vw,72px);    /* page gutter (left/right)            */
  --nav-h:  62px;                    /* fixed nav height (sticky offsets)   */
  --space-section: clamp(76px,9vw,140px); /* vertical section padding       */
  --radius: 8px;  --radius-card: 12px;                     /* soft corners on controls (buttons/chips)*/

  /* ---------- MOTION ----------------------------------------------------- */
  --t:    .6s cubic-bezier(.16,.84,.34,1);  /* standard ease                */
  --t-in: .8s cubic-bezier(.16,.84,.34,1);  /* reveal / enter               */
  --ease: cubic-bezier(.16,.84,.34,1);

  /* ---------- AVA · thương hiệu thành viên hệ sinh thái ------------------ */
  --ava-green:  #66FECB;   /* chỉ dùng trong logo AVA (hai đỉnh A)          */
  --ava-teal:   #C8F0F8;   /* chỉ dùng trong logo AVA (chữ V ở giữa)        */
  --paper-3:    #E3EAEC;   /* bậc sáng thứ ba — sage trung tính             */

  /* ---------- AVA · trạng thái (ngữ nghĩa, không phải accent) ------------ */
  --ok:    #007A7A;  --ok-bg:   rgba(0,163,163,.10);
  --warn:  #A86A12;  --warn-bg: rgba(201,139,43,.14);
  --bad:   #B0412E;  --bad-bg:  rgba(176,65,46,.10);

  /* ---------- DEPTH (aesthetic playbook) --------------------------------- */
  --shadow-sm:0 1px 2px rgba(0,18,26,.05),0 2px 8px rgba(0,18,26,.04);
  --shadow-md:0 6px 18px rgba(0,18,26,.08),0 2px 6px rgba(0,18,26,.05);
  --shadow-teal:0 14px 40px rgba(0,163,163,.22);

  /* ---------- ELEVATION (used rarely; flat brand) ----------------------- */
  --z-nav: 60; --z-subnav: 50; --z-overlay: 55;
}

/* ----------------------------------------------------------------------------
   USAGE NOTES
   • Two-tone rhythm: alternate ink (default <body>) and .paper / .paper-2
     sections. Never two identical tones adjacent.
   • Brass is the ONLY accent. Spend it on eyebrows, the brand dot, hover
     states, one or two accent words — never as fills across large areas.
   • Corners are square (--radius:0). Keep it; it carries the "engineered
     system" personality.
   • All dividers are 1px hairlines from the --line-* tokens, never solid bars.
   • Respect prefers-reduced-motion (handled in components.css).
---------------------------------------------------------------------------- */