:root {
  /* Mau - theme sang (mac dinh) */
  --paper: #F6F7F4;
  --raise: #FFFFFF;
  --ink: #17233F;
  --ink-2: #55607A;
  --rule: #D6DAD1;
  --rule-soft: #E4E7DF;
  --mark: #EDE04A;
  --mark-soft: rgba(237, 224, 74, .45);
  --accent: #1F5C57;

  /* Chu nam tren nen --mark luon la mau nay o ca hai theme, khong doi theo dark mode */
  --mark-ink: #17233F;

  /* Chu - vai tro display (tieu de lon) */
  --font-display-family: 'Newsreader', Georgia, serif;
  --font-display-weight: 500;
  --font-display-style: normal;
  --font-display-line-height: 1.02;
  --font-display-letter-spacing: -0.015;
  --font-display-size: 88px;

  /* Chu - vai tro heading (tieu de muc) */
  --font-heading-family: 'Newsreader', Georgia, serif;
  --font-heading-weight: 500;
  --font-heading-style: normal;
  --font-heading-line-height: 1.2;
  --font-heading-letter-spacing: -0.01;
  --font-heading-size: 62px;

  /* Chu - vai tro number (so thu tu) */
  --font-number-family: 'Newsreader', Georgia, serif;
  --font-number-weight: 400;
  --font-number-style: italic;
  --font-number-line-height: 1;
  --font-number-opacity: 0.55;
  --font-number-size: 96px;

  /* Chu - vai tro kicker (cau nhan, dung cho mau quote) */
  --font-kicker-family: 'Newsreader', Georgia, serif;
  --font-kicker-weight: 400;
  --font-kicker-style: italic;
  --font-kicker-line-height: 1.3;
  --font-kicker-size: 56px;

  /* Chu - vai tro body (than bai) */
  --font-body-family: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-body-weight: 400;
  --font-body-style: normal;
  --font-body-line-height: 1.6;
  --font-body-size: 36px;

  /* Chu - vai tro label (nhan nho) */
  --font-label-family: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-label-weight: 600;
  --font-label-style: normal;
  --font-label-letter-spacing: 0.16;
  --font-label-size: 24px;

  /* Chu - vai tro caption (chu thich) */
  --font-caption-family: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-caption-weight: 400;
  --font-caption-style: normal;
  --font-caption-size: 28px;

  /* He so thu co chu theo kho anh, quy chieu goc la kho 4:5 (1080x1350) */
  --format-scale-1-1: 0.85;
  --format-scale-9-16: 0.85;
}

[data-theme="dark"] {
  --paper: #111729;
  --raise: #18203A;
  --ink: #E9EBE3;
  --ink-2: #98A1B6;
  --rule: #2B3454;
  --rule-soft: #222B48;
  --mark: #E2D24B;
  --mark-soft: rgba(226, 210, 75, .26);
  --accent: #74D6C8;
}

[data-theme="brand"] {
  /* Bang mau rieng cua Chinh: nen kem am, chu navy, nhan vang, accent cam */
  --paper: #F9F8F6;
  --raise: #FFFFFF;
  --ink: #213E60;
  --ink-2: #5A6E8C;
  --rule: #E6DED2;
  --rule-soft: #F1EBE1;
  --mark: #FECF73;
  --mark-soft: rgba(254, 207, 115, .45);
  --accent: #EC7147;
}

[data-theme="sage"] {
  /* Tra xanh - editorial, nen sang nga xanh reu, nhan mau chanh la */
  --paper: #F5F6EF;
  --raise: #FFFFFF;
  --ink: #26311F;
  --ink-2: #5C6B4C;
  --rule: #D7DCC5;
  --rule-soft: #E7EADA;
  --mark: #DCE896;
  --mark-soft: rgba(220, 232, 150, .45);
  --accent: #56714A;
}

[data-theme="terracotta"] {
  /* Dat nung - nen cat am, nhan mau mo cam, accent do gach */
  --paper: #FBF3EA;
  --raise: #FFFFFF;
  --ink: #3B2A1F;
  --ink-2: #7A5A44;
  --rule: #E8D6C1;
  --rule-soft: #F3E8DA;
  --mark: #FBCE8A;
  --mark-soft: rgba(251, 206, 138, .45);
  --accent: #C1502E;
}

[data-theme="ocean"] {
  /* Xanh bien dam - nen teal-den, chu ngoc trai, nhan bac ha */
  --paper: #0E2429;
  --raise: #163037;
  --ink: #E7F1EE;
  --ink-2: #9AB6B0;
  --rule: #1E3E43;
  --rule-soft: #17343A;
  --mark: #8FE9D6;
  --mark-soft: rgba(143, 233, 214, .28);
  --accent: #4BC8B0;
}

[data-theme="charcoal"] {
  /* Than chi toi gian - xam trung tinh, nhan vang co dien, accent do gach */
  --paper: #F1F1EF;
  --raise: #FFFFFF;
  --ink: #1A1A18;
  --ink-2: #5C5C58;
  --rule: #D3D3CE;
  --rule-soft: #E5E5E1;
  --mark: #FFE066;
  --mark-soft: rgba(255, 224, 102, .45);
  --accent: #B23A2E;
}

[data-theme="blush"] {
  /* Hong phan - nen hong sua, chu nau-do dam, nhan hong nhat */
  --paper: #FBF2F1;
  --raise: #FFFFFF;
  --ink: #402226;
  --ink-2: #8C6367;
  --rule: #EFD9D8;
  --rule-soft: #F6E9E8;
  --mark: #FFD3DE;
  --mark-soft: rgba(255, 211, 222, .5);
  --accent: #C0526B;
}

[data-theme="indigo"] {
  /* Cham dem - nen tim than dam, chu trang oai huong, nhan vang am */
  --paper: #15132B;
  --raise: #1D1A3A;
  --ink: #EBE7F5;
  --ink-2: #A79EC4;
  --rule: #2C2854;
  --rule-soft: #221F42;
  --mark: #F4CE6E;
  --mark-soft: rgba(244, 206, 110, .28);
  --accent: #9083E0;
}