/* ===== Design tokens — bright "trắng tinh + cam ấm" theme ===== */
:root {
  /* Surfaces — white-dominant, cool-neutral (navy structure + orange accent) */
  --white:         #FFFFFF;
  --page:          #FFFFFF;   /* primary page background */
  --surface:       #F4F6F8;   /* alternating section bg (very light cool grey) */
  --mint-tint:     #EAF1F8;   /* light blue tint — small accent cards/pills */
  --mint-tint-2:   #F5F8FB;

  /* Brand — navy structure + orange accent */
  --teal:          #FB923C;   /* bright orange — highlight text / decorative / hover */
  --teal-bright:   #FFB266;   /* lighter orange */
  --teal-700:      #EA580C;   /* vivid orange — button bg & small labels on white */
  --teal-deep:     #163A66;   /* navy section / card background */
  --teal-deepest:  #102744;   /* deep navy footer grounding */
  --mint-accent:   #FB923C;   /* orange accent on navy */
  --mint-soft:     #FDBA74;

  /* Borders & dividers */
  --border:         #E6E9ED;
  --border-strong:  #D2D8E0;
  --border-on-dark: #2B5286;

  /* Text */
  --ink:            #16263F;   /* headings — dark navy, high contrast on white */
  --ink-body:       #41505F;   /* body copy */
  --ink-muted:      #717D8B;   /* captions / muted */
  --on-dark:        #EAF1F9;   /* text on navy */
  --on-dark-muted:  #A7BFD8;   /* muted text on navy */

  /* ---- Back-compat aliases (so existing utility classes keep working) ---- */
  --emerald:        var(--teal);
  --emerald-deep:   var(--teal-deep);
  --bg-dark:        var(--teal-deepest);
  --bg-dark-soft:   #1D4778;
  --bg-primary:     var(--page);
  --bg-secondary:   var(--surface);
  --cream:          var(--surface);
  --gold:           var(--teal-700);   /* legacy accent → teal */
  --gold-soft:      var(--teal);
  --border-dark:    var(--border-on-dark);
  --border-light:   var(--border);
  --divider:        var(--border);
  --text-primary:        var(--ink);
  --text-secondary:      var(--ink-body);
  --text-muted:          var(--ink-muted);
  --text-on-dark:        var(--on-dark);
  --text-on-dark-muted:  var(--on-dark-muted);

  /* Type families — Vietnamese-optimized */
  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    var(--font-label); /* legacy alias — no monospace anymore */

  /* Layout */
  --container-w:  1320px;
  --content-w:    1200px;
  --section-px:   88px;
  --section-py:   104px;

  /* Radius — softer, friendlier */
  --radius:       16px;
  --radius-sm:    12px;
  --radius-lg:    24px;

  /* Motion */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emph:    cubic-bezier(0.83, 0, 0.17, 1);

  /* Shadows — soft, light */
  --shadow-sm:    0 2px 8px -2px rgba(16, 33, 60, .10);
  --shadow:       0 12px 32px -12px rgba(16, 33, 60, .16);
  --shadow-lg:    0 28px 60px -28px rgba(16, 33, 60, .26);
}

@media (max-width: 1024px) {
  :root { --section-px: 40px; --section-py: 72px; }
}
@media (max-width: 640px) {
  :root { --section-px: 20px; --section-py: 56px; }
}