/* Viec 3 Mien (GTV) brand tokens, shared by the public site and the admin.
   Source: "Brand Guidelines - Thuong Hieu Viec 3 Mien" (PDF, 2026-10-15) + official logo file.
   - Palette: the 8 official blues, monochrome is the default rule; red/yellow only per the triad rule.
   - Logo colours (pixel-measured from the official logo): navy #02275A, red #FE0000, ring #0077C0.
   - Fonts: UTM Bebas (display) and UTM Avo (text) are the official faces. Their files are not available
     yet, so Oswald and Montserrat are TEMPORARY stand-ins (both ship Vietnamese glyphs). Once the UTM
     woff2 files exist, add @font-face rules here; the stacks below already list the UTM names first. */
:root {
  /* Official blue scale, dark to light */
  --v3m-b900: #03045e;
  --v3m-b800: #06188a;
  --v3m-b700: #0a2db5;
  --v3m-b600: #0d41e1;
  --v3m-b500: #0c63e7;
  --v3m-b400: #0a85ed;   /* decorative only: 3.8:1 on white */
  --v3m-b300: #09a6f3;   /* decorative only */
  --v3m-b200: #07c8f9;   /* decorative only */

  /* Logo colours */
  --v3m-logo-navy: #02275a;
  --v3m-logo-red: #fe0000;   /* decorative only: 4.0:1 on white, never body text */
  --v3m-logo-ring: #0077c0;

  /* Semantic aliases used by site.css and admin.css */
  --v3m-navy: var(--v3m-b800);        /* dark brand surface */
  --v3m-navy-2: var(--v3m-b900);
  --v3m-blue: var(--v3m-b600);        /* primary action, links: 7.3:1 on white */
  --v3m-blue-600: var(--v3m-b700);    /* hover / pressed */
  --v3m-blue-50: #eef3fe;
  --v3m-blue-100: #dce6fd;
  --v3m-hero: linear-gradient(135deg, var(--v3m-b600) 0%, var(--v3m-b800) 100%);
  --v3m-red: var(--v3m-logo-red);
  --v3m-red-700: #d10000;             /* urgent, errors: 5.7:1 on white */
  --v3m-red-50: #fdecec;
  --v3m-on-dark-muted: #c9d6ff;       /* secondary text on the hero gradient: >= 5:1 */

  --ink: var(--v3m-logo-navy);  /* headings and primary text */
  --ink-2: #33415c;             /* body text */
  --ink-3: #5c677d;             /* muted text, AA on white */
  --line: #e2e7f2;
  --line-2: #cbd4e6;
  --bg: #f4f6fc;
  --surface: #ffffff;

  --ok: #12805c;
  --ok-50: #e7f6f0;
  --warn: #8a4b00;
  --warn-50: #fff4e0;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(6, 24, 138, .06), 0 1px 1px rgba(6, 24, 138, .04);
  --shadow-2: 0 10px 28px -10px rgba(6, 24, 138, .22);
  --focus: 0 0 0 3px rgba(13, 65, 225, .35);

  --font-display: "UTM Bebas", "Oswald", "Arial Narrow", sans-serif;
  --font: "UTM Avo", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

/* Display type (UTM Bebas role): uppercase, condensed, for big headings and KPI numbers only. */
.display { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .01em; line-height: 1.25; color: var(--ink); }

/* Official logo (raster, 789x234). Only ever placed on white or very light surfaces:
   the guideline has no reversed/white version, so never put it on blue or dark backgrounds. */
.v3m-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.v3m-logo img { height: 34px; width: auto; display: block; }
.v3m-logo--plate { background: #fff; border-radius: var(--radius-sm); padding: 8px 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}