/* ===== Design Tokens (CSS Variables) ===== */
/* Source of truth: Figma "Website xây dựng Ngọc Minh" – trang chủ (node 3:7, 1728px frame) */
:root {
  /* Primary Colors */
  --color-primary: #F8440A;
  --color-primary-blue: #0F75BD;
  --color-primary-dark: #012060;

  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-text-dark: #3A3A3A;
  --color-text-light: #5A5A5A;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-bg-light: #F4FAFE;
  --color-bg-grey: #F9F9F9;
  --color-placeholder: #D9D9D9;

  /* Header Colors */
  --header-top-bg: var(--color-white);
  --header-top-text: var(--color-text-dark);
  --header-top-icon: var(--color-primary-blue);
  --header-top-border: var(--color-border);
  --header-main-bg: var(--color-white);
  --header-menu-bg: var(--color-white);
  --header-menu-text: var(--color-text-dark);
  --header-menu-active-bg: #F4FAFE;
  --header-menu-active-text: var(--color-primary-blue);

  /* Footer Colors */
  --footer-bg: var(--color-primary-dark);
  --footer-text: var(--color-white);
  --footer-title-text: var(--color-white);
  --footer-link-text: var(--color-white);
  --footer-link-hover: var(--color-primary);
  --footer-border: rgba(255, 255, 255, 0.1);

  /* Typography */
  --font-primary: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-label: var(--font-primary);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;

  /* Font Sizes */
  --font-size-label: 14px;
  --font-size-body: 16px;
  --font-size-body-sm: 14px;
  --font-size-nav: 16px;
  --font-size-btn: 18px;
  --font-size-heading-lg: 32px;
  --font-size-hero: 64px;

  /* Letter Spacing */
  --letter-spacing-label: 0.1em;
  --letter-spacing-heading: 0.05em;
  --letter-spacing-body: 0.05em;
  --letter-spacing-hero-label: 0.2em;

  /* Layout — Figma frame is 1728 wide with 264px side margins => 1200px content */
  --container-max-width: 1200px;
  --container-gutter: 40px;
  --grid-gap: 24px;

  /* Header / Footer metrics */
  --header-height: 150px;
  --header-top-height: 48px;
  --header-top-padding: 14px 0;
  --header-main-padding: 0;
  --header-nav-padding: 40px 20px;
  --footer-main-padding: 168px 0 60px;
  --footer-bottom-padding: 20px 0;
  --section-padding: 80px 0;
}

/* ===== Base typography =====
   The compiled style.css still sets body to "Quicksand" and every heading to
   "Oswald" — neither is loaded any more and neither is in the design. These
   rules put the whole document on the design's type stack; anything that
   needs a different face opts in explicitly. */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--color-text-dark); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  letter-spacing: normal;
  color: var(--color-black); }

p, li, td, th, dd, dt, blockquote, address, label,
input, button, textarea, select, .btn {
  font-family: var(--font-primary);
  font-size: inherit;
  line-height: 1.5; }

p {
  margin: 0 0 16px; }

/* style.css still asks for "Oswald", "Darker Grotesque" and "Quicksand" in 19
   places — none of them are loaded any more, so those elements fall back to the
   browser's default sans-serif. That is why the news category and single-post
   pages ignore var(--font-primary): the selectors there (.entry-title,
   .widget-title, .wpcf7-form *, ...) outrank the bare body/h1-h6 rules above.
   One blanket rule in this shared file settles it for every template; icon
   fonts and monospace blocks are the only opt-outs. */
html body,
html body *:not(i):not([class*="ion-"]):not(.ion):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(pre):not(code):not(kbd):not(samp) {
  font-family: var(--font-primary); }