/* ============================================================
   HHP PAPER — Design tokens
   Built from the brand guideline (MOTIF ĐỒ HỌA) + logo colors.
   ============================================================ */
:root{
  /* ---- Brand blues ---- */
  --blue-900:#024a82;          /* deepest, for shadows/contrast */
  --blue-700:#0066B2;          /* guideline RGB 0 102 178 / logo #0167B1 */
  --blue-600:#0167B1;          /* primary brand blue (logo) */
  --blue-500:#0a7fcf;
  --blue-400:#00A1DD;          /* guideline RGB 0 161 221 — light azure */
  --blue-200:#7fd0ef;
  --blue-100:#d6eefb;
  --blue-050:#eef8fd;

  /* ---- Brand orange ---- */
  --orange-600:#e35a2c;
  --orange-500:#F57445;        /* logo accent #F57445 */
  --orange-400:#fb8b5f;
  --orange-100:#ffe5d8;

  /* ---- Sustainability green (ESG accent, drawn from GO GREEN art) ---- */
  --green-700:#1f8f4d;
  --green-500:#3bb368;
  --green-300:#86d6a3;
  --green-050:#e9f8ef;

  /* ---- Neutrals / paper ---- */
  --ink-900:#0e2235;           /* near-black blue ink */
  --ink-700:#27425a;
  --ink-500:#5c7488;
  --ink-300:#9fb1c0;
  --paper-0:#ffffff;
  --paper-50:#f7fafc;
  --paper-100:#eef3f7;
  --paper-200:#e1e9f0;
  --line:rgba(14,34,53,.10);
  --line-strong:rgba(14,34,53,.18);

  /* ---- Tweakable accent (default = orange) ---- */
  --accent:var(--orange-500);
  --accent-600:var(--orange-600);
  --accent-100:var(--orange-100);

  /* ---- Semantic ---- */
  --primary:var(--blue-600);
  --primary-deep:var(--blue-700);
  --bg:var(--paper-0);
  --bg-alt:var(--paper-50);
  --text:var(--ink-900);
  --text-soft:var(--ink-500);

  /* ---- Type ---- */
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --fw-black:800;

  /* fluid type scale */
  --t-mega:clamp(2.6rem,1.4rem + 5.6vw,6.2rem);
  --t-h1:clamp(2.1rem,1.3rem + 3.6vw,4.2rem);
  --t-h2:clamp(1.7rem,1.15rem + 2.4vw,3rem);
  --t-h3:clamp(1.25rem,1rem + 1vw,1.7rem);
  --t-lead:clamp(1.05rem,.95rem + .5vw,1.35rem);
  --t-body:clamp(1rem,.96rem + .2vw,1.12rem);
  --t-sm:.875rem;
  --t-xs:.75rem;

  /* ---- Spacing / shape ---- */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;
  --pad-section:clamp(64px,9vw,140px);
  --maxw:1280px;
  --gutter:clamp(20px,5vw,64px);

  /* ---- Shadows ---- */
  --sh-sm:0 1px 2px rgba(14,34,53,.06),0 2px 8px rgba(14,34,53,.05);
  --sh-md:0 6px 18px rgba(14,34,53,.08),0 2px 6px rgba(14,34,53,.05);
  --sh-lg:0 24px 60px -20px rgba(8,47,82,.28),0 8px 24px rgba(14,34,53,.08);
  --sh-blue:0 24px 60px -22px rgba(1,103,177,.55);

  /* ---- Motion (tweakable scale 0..1) ---- */
  --motion:1;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur-1:calc(.4s * var(--motion) + .001s);
  --dur-2:calc(.7s * var(--motion) + .001s);
  --dur-3:calc(1.1s * var(--motion) + .001s);
}

/* motion intensity = off -> kill transforms/transitions but keep opacity */
:root[data-motion="off"]{ --motion:0; }
:root[data-motion="subtle"]{ --motion:.55; }

@media (prefers-reduced-motion: reduce){
  :root{ --motion:0; }
}