/* ============================================================
   base.css — shared CSS. Plain CSS, no framework (no Tailwind CDN: it blocks render and audits flag it P1).

   Section 1 = MECHANICS that every project needs (reset, accessibility floors, reveal contract). Keep it.
   Section 2 = TOKENS: seeded from DESIGN.md in Phase 0 (preserve = the old site's system; reimagine = the
   approved direction). Shared components go in assets/css/site.css; page-only styles in assets/css/<page>.css.

   ⚠️ NEVER paste components/CSS from past projects (including retyping from memory). Reuse = rebuild one
   component re-skinned to THIS project's tokens with new class names, logged in brief section 12.
   Rules in section 1 use :where() (zero specificity), so any project rule overrides them without !important.
   ============================================================ */

/* ---------- 1. Mechanics ---------- */

/* box model: without this, any element with width:100% + padding overflows (Tailwind's preflight used to hide it) */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body{ margin:0; -webkit-font-smoothing:antialiased; }
:where(h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd){ margin:0; }
:where(img,video,canvas){ display:block; max-width:100%; height:auto; }
:where(input,button,textarea,select){ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

/* readable line length: body copy never runs wider than ~75 characters */
:where(p,li,dd,figcaption,blockquote){ max-inline-size:75ch; }
:where(h1,h2,h3){ text-wrap:balance; }
:where(p,li){ text-wrap:pretty; }

/* touch targets ≥ 44px (WCAG 2.5.8 + Apple/Material). Standalone links styled as buttons/nav items/footer links
   must also reach 44px: give them display:inline-flex; align-items:center; min-height:44px in their own rule.
   Links inside a sentence are exempt. qa/qa.mjs reports anything smaller. */
:where(button,select,summary,[role="button"],[role="tab"],input:not([type="checkbox"],[type="radio"],[type="hidden"])){ min-block-size:44px; }

/* visible keyboard focus everywhere (projects restyle it, never remove it) */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

/* accordion chevron ([data-acc] button + [data-acc-chev] icon, toggled by base.js) */
:where([data-acc][aria-expanded="true"] [data-acc-chev]){ transform:rotate(180deg); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Reveal-on-scroll contract (base.js adds .in on viewport entry; ?revealall shows everything; screenshot.mjs + qa rely on it).
   Hidden only when JS runs: every page must have an inline <head> script adding the `js` class to <html> early.
   No JS → no html.js → everything is visible; blank sections can never ship.
   The reveal's transition/transform/easing is defined by EACH PROJECT per its approved motion direction. */
html.js .reveal{ opacity:0; }
html.js .reveal.in{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- 2. Tokens (Phase 0: seed from DESIGN.md; keep names semantic to THIS project) ---------- */
/* Seeded from DESIGN.md (approved UI Kit 2026-10-19). Allowed text per fill is listed in DESIGN.md §2. */
:root{
  /* color */
  --indigo:#3730A3;        /* text on it: #fff */
  --indigo-deep:#2E2A99;   /* hover; link/number text on light */
  --indigo-press:#25217D;
  --indigo-mist:#B9B8FA;   /* text/lines on dark */
  --indigo-glow:#8E87F5;   /* "Data" in the wordmark on dark (6.4:1 on navy) */
  --indigo-haze:#D4D3FB;   /* subtitles on dark */
  --indigo-wash:#F3F4FB;   /* light section; text: ink, muted */
  --navy:#0B0A2A;          /* hero + one dark band; text: #fff, haze, mist, amber-dark */
  --navy-deep:#07061E;
  --amber-dark:#F59E0B;    /* on dark only: signal, focus ring */
  --amber-light:#92400E;   /* "Cơ hội" badge on light; text: #fff */
  --amber-light-ink:#78350F;
  --amber-light-bg:#FFF8EC;
  --ink:#12162B;
  --text-dim:#3E4861;
  --text-muted:#566074;
  --line:#E6E8F0;
  --line-soft:#F1F2F7;
  --line-strong:#C9CBD8;
  --white:#FFFFFF;
  --data-up:#0E7A55;
  --data-down:#B42318;
  --zalo:#0068FF;
  --indigo-ink:#2B2A8F;    /* text on white buttons placed on dark */
  --disabled-ink:#8A90A8;  /* disabled text only, or text ≥ 24px */
  --data-down-bg:#FEF3F2;
  --data-down-line:#F5C2BD;
  --amber-light-line:#F2D3A2;
  --indigo-line:#D6D6F7;
  --light-hover:#E9E9FB;   /* hover of white-on-dark buttons */
  --zalo-hover:#0054CC;
  --error-line:#C2312A;
  --ok-bg:#ECF7F2;
  --neutral-bg:#F7F8FA;

  /* type */
  --font-sans:"Libre Franklin", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, monospace;
  --font-nav:"Be Vietnam Pro", "Libre Franklin", system-ui, sans-serif;   /* navbar + mobile menu only */
  --fs-display:clamp(46px, 6.4vw, 92px);
  --fs-h1:clamp(40px, 4.5vw, 64px);
  --fs-h2:clamp(30px, 3.1vw, 44px);
  --fs-h3:clamp(20px, 1.7vw, 24px);
  --fs-lead:clamp(17px, 1.4vw, 20px);
  --fs-body:clamp(16px, 1.2vw, 17px);
  --fs-small:14px;
  --track-display:-0.035em;
  --track-h1:-0.03em;
  --track-h2:-0.025em;

  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:120px;
  --section:clamp(72px, 9vw, 120px);
  --gutter:clamp(18px, 4.5vw, 64px);
  --maxw:1312px;

  /* radius */
  --r-frame:0px; --r-chip:6px; --r-control:10px; --r-card:14px; --r-card-inner:10px; --r-pill:999px;

  /* depth: the product window is the only raised object */
  --shadow-product:0 24px 50px -30px rgba(18,22,43,.22);
  --focus-ring:3px solid var(--amber-dark);

  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:160ms; --dur-base:280ms; --dur-draw:1400ms;

  /* z-index */
  --z-base:1; --z-raised:10; --z-header:50; --z-overlay:100;
}