/*
 * VMHNĐS design tokens
 * ---------------------------------------------------------------------------
 * Copied VERBATIM from the approved Claude Design system:
 *   _ds/vmhn-s-design-system-c44861b3-5f09-44c6-b4bf-fec4ea70f30b/tokens/
 *
 * Do not hand-edit. If the design system is revised, re-copy these files —
 * the variable names are identical, so everything downstream keeps working.
 *
 * The one change from source: the Google Fonts @import has been removed from
 * the fonts block; the stylesheet is enqueued properly in functions.php
 * instead (an @import inside CSS blocks rendering until it resolves).
 *
 * Order matches the design system's own styles.css.
 */

/* ---------- tokens/fonts.css ---------- */
/* VMHNĐS webfonts.
   SUBSTITUTION NOTE: no brand font files were supplied. These three Google Fonts
   were chosen for full Vietnamese diacritic coverage (including ế ẵ ợ ỹ đ Đ).
   They are loaded from the Google Fonts CDN rather than shipped binaries. */

/* ---------- tokens/colors.css ---------- */
:root{
/* ---- Base ramps ---- */
/* Cờ xanh — the blue lifted directly from the VMHNĐS seal (#283891) */
--vm-blue-950:#0b1026;--vm-blue-900:#101733;--vm-blue-800:#18215a;--vm-blue-700:#1f2b74;
--vm-blue-600:#283891;--vm-blue-500:#3d4fae;--vm-blue-400:#6675c8;--vm-blue-300:#9aa4dd;
--vm-blue-200:#c8ceee;--vm-blue-100:#e6e9f8;--vm-blue-50:#f3f5fc;

/* Ngói — Hanoi roof tile / brick. The primary editorial accent. */
--vm-clay-800:#6f2c19;--vm-clay-700:#8f3b22;--vm-clay-600:#b34a2c;--vm-clay-500:#c2593a;
--vm-clay-300:#e8a48d;--vm-clay-100:#f8e5dd;--vm-clay-50:#fdf4f0;

/* Hồ — lake water and street trees. Used for environment / green topics. */
--vm-lake-800:#20422f;--vm-lake-700:#2b5a45;--vm-lake-600:#356e54;--vm-lake-500:#3e7a5e;
--vm-lake-300:#8fbfa8;--vm-lake-100:#e2f0e9;--vm-lake-50:#f2f8f5;

/* Nắng — sunlight. Highlight and award/recognition contexts only. */
--vm-gold-700:#8f6415;--vm-gold-600:#b8801f;--vm-gold-500:#d99b2b;
--vm-gold-300:#f0cf8c;--vm-gold-100:#fbf1da;

/* Mực & giấy — warm ink on warm paper */
--vm-ink-900:#14161f;--vm-ink-800:#232634;--vm-ink-700:#3a3e50;--vm-ink-600:#565b70;
--vm-ink-500:#767c92;--vm-ink-400:#9aa0b2;--vm-ink-300:#c3c7d3;--vm-ink-200:#e0e2e9;
--vm-ink-100:#eeeff3;--vm-ink-50:#f6f7f9;
--vm-paper:#faf7f1;--vm-paper-2:#f3efe6;--vm-paper-3:#e9e3d6;--vm-white:#ffffff;

/* ---- Semantic aliases ---- */
--color-brand:var(--vm-blue-600);
--color-brand-hover:var(--vm-blue-700);
--color-brand-press:var(--vm-blue-800);
--color-brand-soft:var(--vm-blue-100);

--surface-page:var(--vm-paper);
--surface-card:var(--vm-white);
--surface-sunken:var(--vm-paper-2);
--surface-ink:var(--vm-blue-900);
--surface-brand:var(--vm-blue-600);
--surface-accent:var(--vm-clay-100);
--surface-overlay:rgba(16,23,51,.62);

--text-strong:var(--vm-ink-900);
--text-body:var(--vm-ink-800);
--text-muted:var(--vm-ink-600);
--text-faint:var(--vm-ink-500);
--text-inverse:var(--vm-white);
--text-inverse-muted:var(--vm-blue-200);
--text-brand:var(--vm-blue-600);
--text-accent:var(--vm-clay-700);

--border-subtle:var(--vm-ink-200);
--border-default:var(--vm-ink-300);
--border-strong:var(--vm-ink-900);
--border-brand:var(--vm-blue-600);
--border-inverse:rgba(255,255,255,.24);

--link:var(--vm-blue-600);
--link-hover:var(--vm-clay-600);
--link-visited:var(--vm-blue-800);
--focus-ring:var(--vm-clay-500);

--accent-clay:var(--vm-clay-500);
--accent-lake:var(--vm-lake-500);
--accent-gold:var(--vm-gold-500);

--status-info:var(--vm-blue-600);--status-info-bg:var(--vm-blue-50);
--status-success:var(--vm-lake-600);--status-success-bg:var(--vm-lake-50);
--status-warning:var(--vm-gold-600);--status-warning-bg:var(--vm-gold-100);
--status-danger:var(--vm-clay-600);--status-danger-bg:var(--vm-clay-50);
}

/* ---------- tokens/typography.css ---------- */
:root{
--font-display:"Bricolage Grotesque","Be Vietnam Pro",system-ui,sans-serif;
--font-serif:"Newsreader","Times New Roman",Georgia,serif;
--font-sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

/* Editorial scale — 1.25-ish, tuned so Vietnamese stacked diacritics never clip */
--text-3xs:11px;--text-2xs:12px;--text-xs:13px;--text-sm:15px;--text-base:17px;
--text-lg:19px;--text-xl:22px;--text-2xl:27px;--text-3xl:34px;--text-4xl:44px;
--text-5xl:56px;--text-6xl:72px;--text-7xl:92px;

/* Line-heights are deliberately loose: Vietnamese needs room above and below */
--leading-tight:1.12;/* @kind other */--leading-snug:1.22;/* @kind other */--leading-heading:1.28;/* @kind other */
--leading-normal:1.5;/* @kind other */--leading-body:1.65;/* @kind other */--leading-loose:1.8;/* @kind other */

--tracking-tightest:-0.03em;/* @kind other */--tracking-tight:-0.015em;/* @kind other */--tracking-normal:0;/* @kind other */
--tracking-wide:0.04em;/* @kind other */--tracking-widest:0.14em;/* @kind other */

--weight-light:300;/* @kind other */--weight-regular:400;/* @kind other */--weight-medium:500;/* @kind other */
--weight-semibold:600;/* @kind other */--weight-bold:700;/* @kind other */--weight-extrabold:800;/* @kind other */

/* Composed roles */
--type-display:var(--weight-semibold) var(--text-6xl)/var(--leading-tight) var(--font-display);
--type-h1:var(--weight-semibold) var(--text-4xl)/var(--leading-snug) var(--font-display);
--type-h2:var(--weight-semibold) var(--text-3xl)/var(--leading-heading) var(--font-display);
--type-h3:var(--weight-semibold) var(--text-2xl)/var(--leading-heading) var(--font-display);
--type-h4:var(--weight-semibold) var(--text-xl)/var(--leading-heading) var(--font-sans);
--type-lede:var(--weight-regular) var(--text-xl)/var(--leading-body) var(--font-serif);
--type-body:var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-serif);
--type-ui:var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-sans);
--type-meta:var(--weight-medium) var(--text-xs)/var(--leading-normal) var(--font-sans);
--type-eyebrow:var(--weight-semibold) var(--text-2xs)/1.2 var(--font-sans);

--measure-narrow:34ch;/* @kind other */--measure-body:66ch;/* @kind other */--measure-wide:82ch;/* @kind other */
}

/* ---------- tokens/spacing.css ---------- */
:root{
--space-0:0;--space-px:1px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;
--space-10:64px;--space-11:80px;--space-12:96px;--space-13:128px;--space-14:160px;

--gutter:24px;--gutter-lg:40px;
--section-y:96px;--section-y-sm:56px;
--container-sm:640px;--container-md:840px;--container-lg:1080px;
--container-xl:1280px;--container-full:1440px;
}

/* ---------- tokens/radius.css ---------- */
:root{
/* Restrained. Photography and editorial blocks stay square; only controls soften. */
--radius-none:0;--radius-xs:3px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;
--radius-xl:24px;--radius-pill:999px;--radius-circle:50%;
--radius-card:10px;--radius-image:4px;--radius-control:8px;--radius-input:8px;
--border-hairline:1px;--border-medium:2px;--border-rule:3px;
}

/* ---------- tokens/elevation.css ---------- */
:root{
/* Warm-tinted, low-spread. Nothing floats far off the page. */
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(20,22,31,.06);
--shadow-sm:0 1px 3px rgba(20,22,31,.07),0 1px 2px rgba(20,22,31,.04);
--shadow-md:0 4px 12px rgba(20,22,31,.08),0 1px 3px rgba(20,22,31,.05);
--shadow-lg:0 12px 32px rgba(20,22,31,.11),0 2px 6px rgba(20,22,31,.05);
--shadow-xl:0 28px 64px rgba(16,23,51,.18);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
--shadow-focus:0 0 0 3px rgba(194,89,58,.38);
--scrim-bottom:linear-gradient(to top,rgba(11,16,38,.86) 0%,rgba(11,16,38,.55) 38%,rgba(11,16,38,0) 78%);/* @kind other */
--scrim-flat:linear-gradient(to top,rgba(11,16,38,.72),rgba(11,16,38,.2));/* @kind other */
--blur-glass:saturate(140%) blur(14px);/* @kind other */
}

/* ---------- tokens/motion.css ---------- */
:root{
--dur-instant:80ms;/* @kind other */--dur-fast:140ms;/* @kind other */--dur-base:220ms;/* @kind other */--dur-slow:380ms;/* @kind other */--dur-slower:640ms;/* @kind other */
--ease-out:cubic-bezier(.2,.7,.3,1);/* @kind other */
--ease-in-out:cubic-bezier(.65,.02,.28,1);/* @kind other */
--ease-entrance:cubic-bezier(.16,.84,.34,1);/* @kind other */
--transition-control:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);/* @kind other */
--transition-surface:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);/* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--dur-instant:0ms;/* @kind other */--dur-fast:0ms;/* @kind other */--dur-base:0ms;/* @kind other */--dur-slow:0ms;/* @kind other */--dur-slower:0ms;/* @kind other */}}

/* ---------- tokens/base.css ---------- */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-strong);text-wrap:balance}
h1{font:var(--type-h1);letter-spacing:var(--tracking-tight)}
h2{font:var(--type-h2);letter-spacing:var(--tracking-tight)}
h3{font:var(--type-h3)}
h4{font:var(--type-h4)}
p{margin:0 0 1em}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.18em;transition:var(--transition-control)}
a:hover{color:var(--link-hover)}
a:visited{color:var(--link-visited)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;display:block}
hr{border:0;border-top:var(--border-hairline) solid var(--border-subtle);margin:var(--space-8) 0}
::selection{background:var(--vm-blue-200);color:var(--vm-blue-900)}