/* ============================================================
   NUOVA International — base.css
   Design tokens, reset, and base typography.
   Shared across every page. Load BEFORE components.css and pages.css.
   ============================================================ */

/* ---- 1. Reset ---- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select{ font-family:inherit; font-size:inherit; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---- 2. Design tokens ---- */
:root{
  /* Brand colors — deep sea blue system, professional data-trust palette */
  --navy:        #0F4C81;   /* primary */
  --navy-dark:   #0A3A63;   /* hover / emphasis */
  --navy-deeper: #082C4D;   /* footer / deep backgrounds */
  --gold:        #B8923D;   /* rating / certification accent — used sparingly */
  --gold-light:  #D9B968;

  /* Neutrals */
  --ink:         #16202B;
  --slate:       #5B6B7C;
  --slate-light: #8C9BAB;
  --line:        #E2E8EF;
  --line-soft:   #EDF1F5;
  --bg:          #FFFFFF;
  --bg-soft:     #F7F9FB;
  --bg-deep:     #F0F3F7;

  /* Status */
  --green:       #1E8E5A;
  --red:         #C0392B;
  --amber:       #B8923D;

  /* Radii & shadows */
  --radius:      4px;
  --radius-lg:   6px;
  --radius-xl:   14px;
  --shadow-sm:   0 1px 2px rgba(15,76,129,0.06), 0 1px 1px rgba(15,76,129,0.04);
  --shadow-md:   0 4px 16px rgba(15,76,129,0.08), 0 2px 6px rgba(15,76,129,0.06);
  --shadow-lg:   0 12px 32px rgba(15,76,129,0.14), 0 4px 12px rgba(15,76,129,0.08);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Layout */
  --container-w: 1240px;
  --nav-h: 72px;
  --topbar-h: 34px;
}

/* ---- 3. Layout primitives ---- */
.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 32px;
}
.container-narrow{
  width:100%;
  max-width:880px;
  margin:0 auto;
  padding:0 32px;
}
section{ position:relative; }
/* Prevent CSS grid items with long text/code content from forcing their
   track wider than available space (classic min-content overflow bug). */
.container, .container-narrow{ min-width:0; }
img, svg{ max-width:100%; }

/* ---- 4. Typography scale ---- */
h1,h2,h3,h4,h5,h6{ font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
h1{ font-size:clamp(32px,4.4vw,48px); font-weight:800; line-height:1.15; }
h2{ font-size:clamp(26px,3.4vw,36px); font-weight:700; line-height:1.25; }
h3{ font-size:20px; font-weight:700; line-height:1.35; }
h4{ font-size:17px; font-weight:700; line-height:1.4; }
p{ color:var(--ink); }
.lead{ font-size:17px; color:var(--slate); line-height:1.7; }

.zh{
  font-size:0.78em;
  color:var(--slate-light);
  font-weight:500;
  display:block;
  margin-top:4px;
}
.tag-zh{
  font-size:12px;
  color:var(--slate);
  background:var(--bg-deep);
  border:1px solid var(--line);
  padding:2px 8px;
  border-radius:3px;
  margin-left:8px;
  font-weight:500;
  vertical-align:middle;
  display:inline-block;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--navy);
}
.eyebrow::before{
  content:"";
  width:18px;
  height:2px;
  background:var(--gold);
  display:inline-block;
}
.eyebrow.on-dark{ color:#BFD4E8; }
.eyebrow.on-dark::before{ background:var(--gold-light); }

.section-head{
  max-width:680px;
  margin-bottom:48px;
}
.section-head h2{ margin-top:12px; }
.section-head p{ margin-top:14px; color:var(--slate); font-size:16px; max-width:560px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center p{ margin-left:auto; margin-right:auto; }

/* ---- 5. Utility classes ---- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.divider{ height:1px; background:var(--line); border:none; }
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--navy);
  color:#fff;
  padding:10px 16px;
  z-index:1000;
  border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }