/* =============================================================
   Protrans v2 · DESIGN TOKENS
   Brand lock: accent #0BA5FA · ink navy #0D1B4B · light theme.
   ============================================================= */
:root{
  /* Accent (1 accent duy nhất) */
  --accent:    #0BA5FA;
  --accent-d:  #0A84CA;
  --accent-l:  #5CC2F7;
  --accent-soft: rgba(11,165,250,.10);

  /* Ink / navy brand surface */
  --ink:    #0D1B4B;
  --ink-2:  #16245F;
  --ink-3:  #1E2E73;

  /* Neutrals (1 hệ xám lạnh) */
  --bg:        #F7F9FC;
  --surface:   #FFFFFF;
  --surface-2: #EEF2F8;
  --text:      #0D1B4B;
  --text-soft: #4A5578;
  --text-mute: #646F91;
  --border:    #E2E8F2;
  --border-soft:#EDF1F7;

  /* On-dark */
  --on-dark:        #FFFFFF;
  --on-dark-soft:   rgba(255,255,255,.74);
  --on-dark-mute:   rgba(255,255,255,.55);
  --on-dark-border: rgba(255,255,255,.14);

  /* Semantic */
  --ok:   #10B981;
  --warn: #F59E0B;
  --err:  #EF4444;

  /* Radius (1 hệ: card 16, pill full, input 10) */
  --r-xs: 8px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadow - khuếch tán nhuộm navy + bezel */
  --shadow-xs: 0 1px 2px rgba(13,27,75,.05);
  --shadow-sm: 0 2px 8px -2px rgba(13,27,75,.08);
  --shadow:    0 10px 24px -10px rgba(13,27,75,.12);
  --shadow-lg: 0 1px 2px rgba(13,27,75,.04), 0 12px 28px -12px rgba(13,27,75,.14), 0 36px 64px -36px rgba(13,27,75,.16);
  --bezel:     0 0 0 1px rgba(13,27,75,.06), inset 0 1px 0 rgba(255,255,255,.7);
  --shadow-accent: 0 12px 30px -10px rgba(11,165,250,.45);

  /* Type */
  --font: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-display: clamp(2.15rem, 5.4vw, 4.4rem);  /* min hạ cho phone: heading dài không quá to/tràn dòng */
  --fs-h1: clamp(1.95rem, 4.2vw, 3.4rem);        /* min hạ cho phone; max desktop giữ nguyên */
  --fs-h2: clamp(1.8rem, 3vw, 2.6rem);
  --fs-h3: 1.3rem;
  --fs-lead: clamp(1.05rem, 1.4vw, 1.22rem);
  --fs-body: 1rem;
  --fs-sm: .9rem;
  --fs-xs: .8rem;

  /* Spacing & layout */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(44px, 6vw, 88px);  /* min hạ cho phone: bớt mỏi cuộn; tablet/desktop giữ */

  /* Motion */
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .5s;

  /* Layers */
  --z-nav: 100;
  --z-overlay: 200;
}