/* Huyền Trần · Workaholic — design tokens (nguồn: huyen-live-ban-giao/tokens/tokens.json).
   Giá trị thương hiệu giữ nguyên; phần cuối là tên vai trò mà main.css dùng. */

@font-face {
  font-family: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-400-normal.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: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-400-normal.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: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-600-normal.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: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-600-normal.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: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-700-normal.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: "Be Vietnam Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-700-normal.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;
}

/* JetBrains Mono (OFL, assets/fonts/jetbrains-mono/OFL.txt): numbers, dates, code, keyboard hints. Variable weight 400–500. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-vietnamese-wght-normal.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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono/jetbrains-mono-latin-wght-normal.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 {
  /* Brand colours */
  --navy-900: #0E3A5C;
  --navy-600: #245A85;
  --sky-100: #E3EEF6;
  --orange-500: #EE6A1F;
  --orange-700: #B84A0C;
  --surface-100: #FAF6F0;
  --surface-0: #FFFFFF;
  --sand-200: #EFE6D8;
  --ink: #15212C;
  --ink-muted: #5B6873;
  --on-navy: #FFFFFF;
  /* Cool neutrals, added 9/11/2026: the cream surface-100 read as generic, so the paper is white and wells are a navy-tinted grey */
  --mist-50: #F4F6F8;
  --mist-200: #E1E6EB;

  /* Brand type */
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --text-mono-size: 0.8125rem;
  --text-display-size: clamp(2.25rem, 1.35rem + 3.2vw, 3.5rem);
  --text-display-line: 1.07;
  --text-display-tracking: -0.015em;
  --text-h1-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  --text-h1-line: 1.2;
  --text-h1-tracking: -0.01em;
  --text-h2-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);
  --text-h2-line: 1.29;
  --text-h3-size: 1.3125rem;
  --text-h3-line: 1.33;
  --text-body-article-size: 1.125rem;
  --text-body-article-line: 1.667;
  --text-body-size: 1rem;
  --text-body-line: 1.625;
  --text-small-size: 0.875rem;
  --text-small-line: 1.43;
  --text-eyebrow-size: 0.75rem;
  --text-eyebrow-line: 1.33;
  --text-eyebrow-tracking: 0.2em;

  /* Brand spacing, radius, size */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --content-article: 720px;
  --content-page: 1200px;

  /* Roles used by main.css */
  --color-paper: var(--surface-0);
  --color-surface: var(--surface-0);
  --color-well: var(--mist-50);
  --color-well-cool: var(--sky-100);
  --color-rule: var(--mist-200);
  --color-scrim: rgb(14 58 92 / 0.94);
  --color-link-rest: #A7BDCE;
  --color-shadow: rgb(14 58 92 / 0.18);
  --color-shadow-deep: rgb(5 20 33 / 0.5);
  --color-glass: rgb(255 255 255 / 0.08);
  --color-glass-hover: rgb(255 255 255 / 0.18);
  --color-glass-edge: rgb(255 255 255 / 0.24);
  --color-grid: rgb(14 58 92 / 0.24);
  --color-grid-dark: rgb(255 255 255 / 0.07);
  --color-scrim-light: rgb(14 58 92 / 0.42);
  --color-mark: rgb(238 106 31 / 0.22);
  --color-dim: rgb(14 58 92 / 0.32);
  --color-ink: var(--ink);
  --color-muted: var(--ink-muted);
  --color-heading: var(--navy-900);
  --color-link: var(--navy-600);
  --color-primary: var(--navy-900);
  --color-primary-hover: var(--navy-600);
  --color-on-primary: var(--on-navy);
  --color-accent: var(--orange-500);
  --color-accent-ink: var(--orange-700);
  --color-focus: var(--orange-700);
  --color-focus-on-dark: var(--on-navy);
  --color-field-edge: var(--ink-muted);
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  --container: var(--content-page);
  --measure: var(--content-article);
  --gutter: var(--space-5);
  --section-gap: var(--space-7);
  --header-height: 72px;
  --sidebar: 300px;

  /* Motion (design-taste-frontend motion layer): UI steps ease out, entrances settle, nothing overshoots */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: var(--ease-enter);
  --m-in: 150ms;
  --m-out: 120ms;
  --m-press: 90ms;
  --m-panel: 200ms;
  --m-slide: 240ms;
  --m-image: 600ms;
  --m-image-out: 400ms;
  --dur-micro: var(--m-out);
  --dur-short: var(--m-in);
}

@media (max-width: 60rem) {
  :root { --gutter: var(--space-4); --section-gap: var(--space-6); --header-height: 64px; }
}
@media (max-width: 40rem) {
  :root { --gutter: var(--space-3); }
}