/* ==========================================================================
   DATPRO Design System — Tokens
   Phase 01 foundation. Every page of the DATPRO.VN redesign must consume
   these tokens instead of hard-coded values.
   Brand colours are sampled directly from the official logo asset
   (assets/img/brand/datpro-logo.png): navy #002868, red #D82018, gold #F0A818.
   ========================================================================== */

:root {
  /* ---------- Brand ---------------------------------------------------- */
  --dp-navy: #002868;          /* exact logo navy — dark sections, footer */
  --dp-navy-900: #001B47;
  --dp-navy-700: #003A80;

  --dp-blue: #005aba;          /* primary interactive blue */
  --dp-blue-700: #00479a;
  --dp-blue-500: #1a72d4;
  --dp-blue-200: #b9d4f1;
  --dp-blue-100: #d9e8f9;
  --dp-blue-50: #eef4fc;

  --dp-red: #d82018;           /* logo accent — used sparingly */
  --dp-gold: #f0a818;          /* logo accent — used sparingly */

  /* ---------- Surfaces -------------------------------------------------- */
  --dp-bg: #ffffff;
  --dp-surface: #f6f8fb;
  --dp-surface-2: #eef3f9;
  --dp-border: #e4eaf2;
  --dp-border-strong: #d2dcea;

  /* ---------- Text ------------------------------------------------------ */
  --dp-text: #0a1b33;          /* headings */
  --dp-text-body: #46586f;     /* paragraphs */
  --dp-text-muted: #64768c;    /* secondary */
  --dp-text-subtle: #8494a6;   /* meta, dates */
  --dp-text-on-dark: #ffffff;
  --dp-text-on-dark-muted: #b8cbe2;

  /* ---------- Product identity colours (from approved mockup) ---------- */
  --dp-product-enterprise: #1f7ae0;
  --dp-product-care: #12a05c;
  --dp-product-language: #f2921d;
  --dp-product-car: #e0392b;

  /* ---------- Typography ------------------------------------------------ */
  --dp-font: "Be Vietnam Pro", "Noto Sans SC", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", sans-serif;

  --fs-eyebrow: 0.8125rem;                              /* 13px */
  --fs-h1: clamp(1.75rem, 1.05rem + 2.2vw, 2.375rem);   /* 28 → 38px */
  --fs-h2: clamp(1.375rem, 1.1rem + 0.95vw, 1.75rem);   /* 22 → 28px */
  --fs-h3: clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem);/* 18 → 21px */
  --fs-h4: 1.0625rem;                                   /* 17px */
  --fs-lead: clamp(0.9688rem, 0.92rem + 0.2vw, 1.0625rem);
  --fs-body: 0.9375rem;                                 /* 15px */
  --fs-sm: 0.875rem;                                    /* 14px */
  --fs-xs: 0.8125rem;                                   /* 13px */

  --lh-tight: 1.16;
  --lh-heading: 1.28;
  --lh-body: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-eyebrow: 0.11em;
  --ls-heading: -0.018em;

  /* ---------- Layout ---------------------------------------------------- */
  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 3.2vw, 2.5rem);
  --section-py: clamp(3.5rem, 6vw, 6rem);
  --header-h: 72px;

  /* ---------- Spacing scale (4px base) ---------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* ---------- Radius ---------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---------- Elevation (deliberately very light) ----------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 40, 104, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 40, 104, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 40, 104, 0.07);
  --shadow-lg: 0 16px 40px rgba(0, 40, 104, 0.1);

  /* ---------- Motion ---------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;

  /* ---------- Z-index --------------------------------------------------- */
  --z-header: 100;
  --z-dropdown: 120;
  --z-fab: 140;
  --z-drawer: 160;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 76px;
  }
}