/* =============================================================
 * VietBridge Consulting — Design Tokens
 * Colors, type, spacing, radii, shadow, motion
 * ============================================================= */

/* ---------- Webfonts (Google Fonts CDN) ----------
 * Substituted Google Fonts for the brand fonts declared on the
 * site (Playfair Display + DM Sans). These ARE the brand fonts,
 * but you may want to self-host for performance. See /fonts/.
 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');
/* CJK stack — Playfair and DM Sans have no Chinese glyphs. Subset before shipping. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND CORE ----------
   * Three-color signature drawn straight from the logo:
   * a deep institutional navy, a confident teal, and a warm gold accent.
   */
  --vb-navy:        #1B3A6B;   /* Primary brand · headings, links, structure */
  --vb-teal:        #00696D;   /* Outbound accent · CTAs, highlights */
  --vb-gold:        #C9A84C;   /* Highlight · emphasis word underline, decorative lines */

  /* ---------- NAVY SCALE ---------- */
  --vb-navy-50:   #F0F4FA;
  --vb-navy-100:  #DCE5F1;
  --vb-navy-200:  #B6C6DF;
  --vb-navy-300:  #8AA3C8;
  --vb-navy-400:  #5D7FAF;
  --vb-navy-500:  #3A5C92;
  --vb-navy-600:  #1B3A6B;   /* base */
  --vb-navy-700:  #173158;
  --vb-navy-800:  #112641;
  --vb-navy-900:  #0A1A2E;
  --vb-navy-950:  #060F1C;

  /* ---------- TEAL SCALE ---------- */
  --vb-teal-50:   #E6F2F3;
  --vb-teal-100:  #C6E1E3;
  --vb-teal-200:  #8FC4C8;
  --vb-teal-300:  #57A6AB;
  --vb-teal-400:  #208A8F;
  --vb-teal-500:  #00696D;   /* base */
  --vb-teal-600:  #005A5E;
  --vb-teal-700:  #00484B;
  --vb-teal-800:  #00373A;
  --vb-teal-900:  #002527;

  /* ---------- GOLD SCALE ---------- */
  --vb-gold-50:   #FBF6E8;
  --vb-gold-100:  #F4E9C3;
  --vb-gold-200:  #E9D38B;
  --vb-gold-300:  #DEBE63;
  --vb-gold-400:  #C9A84C;   /* base */
  --vb-gold-500:  #B0913B;
  --vb-gold-600:  #8F7430;
  --vb-gold-700:  #6E5824;

  /* ---------- NEUTRALS ----------
   * Cool-leaning grays that sit naturally with navy.
   */
  --vb-ivory:     #FAF7F0;   /* Warm paper background — used on insights/about */
  --vb-paper:     #FBFBFA;   /* Default page background (light, near-white) */
  --vb-white:     #FFFFFF;
  --vb-gray-50:   #F6F7F8;
  --vb-gray-100:  #ECEEF1;
  --vb-gray-200:  #DCE0E5;
  --vb-gray-300:  #C2C8D0;
  --vb-gray-400:  #97A0AB;
  --vb-gray-500:  #6B7480;
  --vb-gray-600:  #4A5260;
  --vb-gray-700:  #303843;
  --vb-gray-800:  #1F252E;
  --vb-gray-900:  #0F141A;
  --vb-black:     #000000;

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg-1:         var(--vb-navy-900);   /* Primary text */
  --fg-2:         var(--vb-gray-700);   /* Secondary body */
  --fg-3:         var(--vb-gray-500);   /* Muted, captions */
  --fg-4:         var(--vb-gray-400);   /* Disabled / placeholder */
  --fg-on-dark:   var(--vb-white);
  --fg-on-navy:   #E7EDF7;
  --fg-accent:    var(--vb-teal-500);
  --fg-link:      var(--vb-teal-500);
  --fg-link-hover:var(--vb-teal-700);

  /* ---------- SEMANTIC BACKGROUND ---------- */
  --bg-1:         var(--vb-paper);      /* Page */
  --bg-2:         var(--vb-white);      /* Cards on page */
  --bg-3:         var(--vb-gray-50);    /* Subtle panel */
  --bg-tinted:    var(--vb-ivory);      /* Warm editorial sections */
  --bg-dark:      var(--vb-navy-900);   /* Hero / footer dark band */
  --bg-navy:      var(--vb-navy);
  --bg-teal:      var(--vb-teal);

  /* ---------- BORDERS ---------- */
  --border-1:     #E4E8EE;              /* Card / divider */
  --border-2:     #D0D6DE;              /* Stronger control */
  --border-strong:var(--vb-navy);
  --border-focus: var(--vb-teal-500);

  /* ---------- SEMANTIC STATE ---------- */
  --success:      #2F8F5F;
  --warning:      #C9A84C;
  --danger:       #B23A48;
  --info:         var(--vb-teal-500);

  /* =============================================================
   * STATUS / DEADLINE SYSTEM  (added Aug 2026)
   * The single most load-bearing colour decision in the product.
   * IDENTICAL across ERP, client app and staff app — a deadline that
   * is amber for the client is amber for Nancy. Never colour alone:
   * every state ships with an icon glyph AND a text label.
   * Four states only. Do not add a fifth.
   * ============================================================= */
  --status-ontrack:        #2F8F5F;
  --status-ontrack-fg:     #1C6440;   /* AA on -bg */
  --status-ontrack-bg:     #E9F4EE;
  --status-ontrack-border: #B4DBC4;
  --status-attention:        #C9A84C;
  --status-attention-fg:     #77601F;   /* gold fails AA at body size — use this for text */
  --status-attention-bg:     #FBF6E8;
  --status-attention-border: #E9D38B;
  --status-urgent:        #D97706;
  --status-urgent-fg:     #8A4A04;
  --status-urgent-bg:     #FDF2E4;
  --status-urgent-border: #F3CE9B;
  --status-breach:        #B23A48;
  --status-breach-fg:     #7E2732;
  --status-breach-bg:     #FBECEE;
  --status-breach-border: #EFC0C6;
  --status-neutral:        var(--vb-gray-400);
  --status-neutral-fg:     var(--vb-gray-600);
  --status-neutral-bg:     var(--vb-gray-50);
  --status-neutral-border: var(--border-1);
  /* Canonical glyphs — pair with the colour, always */
  --status-glyph-ontrack:   "\2713";  /* @kind other */
  --status-glyph-attention: "\25CF";  /* @kind other */
  --status-glyph-urgent:    "\26A0";  /* @kind other */
  --status-glyph-breach:    "\2715";  /* @kind other */

  /* ---------- DIRECTION ----------
   * Load-bearing, not decorative. Always accompanied by the word.
   */
  --dir-outbound:    var(--vb-teal-500);
  --dir-outbound-bg: var(--vb-teal-50);
  --dir-outbound-fg: var(--vb-teal-700);
  --dir-inbound:     var(--vb-navy);
  --dir-inbound-bg:  var(--vb-navy-50);
  --dir-inbound-fg:  var(--vb-navy-700);

  /* ---------- AI-GENERATED CONTENT ----------
   * One treatment, used everywhere a machine wrote something:
   * neutral tint + 1px DASHED border + mono uppercase label.
   * Deliberately not a new brand hue — the dash is the signal, so it
   * survives greyscale, dark mode and colour-blindness.
   */
  --ai-bg:        #F4F5F7;
  --ai-border:    #C2C8D0;
  --ai-label:     var(--vb-gray-600);
  --ai-fg:        var(--vb-gray-700);
  --ai-accent:    var(--vb-gray-500);
  --ai-border-style: dashed; /* @kind other */
  /* Indicative-guidance note (agent answers, briefs) — gold-bordered, calm */
  --ai-caveat-bg:     var(--vb-gold-50);
  --ai-caveat-border: var(--vb-gold-200);
  --ai-caveat-fg:     #6E5824;

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Playfair Display', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — editorial, generous headlines */
  --text-eyebrow: 12px;       /* uppercase tracked label */
  --text-xs:      12px;
  --text-sm:      14px;
  --text-base:    16px;
  --text-md:      17px;
  --text-lg:      19px;
  --text-xl:      22px;
  --text-2xl:     28px;
  --text-3xl:     36px;
  --text-4xl:     48px;
  --text-5xl:     64px;
  --text-6xl:     84px;

  --leading-tight: 1.08;
  --leading-snug:  1.2;
  --leading-base:  1.55;
  --leading-loose: 1.75;

  --tracking-eyebrow: 0.16em;
  --tracking-tight:   -0.02em;
  --tracking-base:    0;
  --tracking-loose:   0.04em;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;

  /* ---------- SPACING (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl:28px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 28, 50, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 28, 50, 0.08), 0 1px 2px rgba(15, 28, 50, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 28, 50, 0.08), 0 2px 4px rgba(15, 28, 50, 0.04);
  --shadow-lg: 0 12px 30px rgba(15, 28, 50, 0.10), 0 4px 10px rgba(15, 28, 50, 0.05);
  --shadow-xl: 0 24px 60px rgba(15, 28, 50, 0.14), 0 8px 20px rgba(15, 28, 50, 0.06);
  --shadow-card-hover: 0 18px 40px rgba(27, 58, 107, 0.16);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast:   140ms; /* @kind other */
  --duration-base:   220ms; /* @kind other */
  --duration-slow:   420ms; /* @kind other */

  /* ---------- LAYOUT ---------- */
  --container-max: 1240px;
  --container-pad: 32px;

  /* =============================================================
   * ERP DENSITY LAYER  (added Aug 2026)
   * The marketing site is generous and editorial; the ERP is the
   * opposite. Density over whitespace, information over decoration.
   * Playfair is DROPPED in the ERP — do not carry it over.
   * ============================================================= */
  --erp-font-body:      var(--font-body);
  --erp-text-xs:        11px;
  --erp-text-sm:        12px;
  --erp-text-base:      13px;
  --erp-text-md:        14px;
  --erp-text-lg:        16px;
  --erp-text-title:     20px;
  --erp-leading:        1.42;
  --erp-row-h:          38px;
  --erp-row-h-compact:  30px;
  --erp-cell-pad-x:     10px;
  --erp-page-pad:       16px;
  --erp-gap:            8px;
  --erp-rail-w:         240px;
  --erp-rail-w-collapsed: 60px;
  --erp-topbar-h:       48px;
  --erp-drawer-w:       560px;
  --erp-radius:         var(--radius-sm);

  /* ---------- MOBILE APP LAYER ----------
   * Client app: comfortable, calm. Staff app: tight, utilitarian.
   */
  --app-text-base:   16px;
  --app-text-sm:     14px;
  --app-text-lg:     18px;
  --app-status-size: 30px;     /* the one place Playfair earns its keep */
  --app-tabbar-h:    56px;
  --app-gutter:      16px;
  --app-card-gap:    12px;
  --staff-text-base: 15px;
  --staff-row-h:     56px;
  --staff-gutter:    12px;
  --tap-min:         44px;     /* never smaller, either app */

  /* ---------- AGENT SURFACE ---------- */
  --agent-panel-w:      420px;
  --agent-launcher-size:52px;
  --agent-bubble-radius:14px;
  --agent-bubble-client: var(--vb-teal-500);
  --agent-bubble-client-fg: #fff;
  --agent-bubble-agent:  var(--vb-gray-50);
  --agent-bubble-human:  var(--vb-navy-50);

  /* ---------- PRICING SURFACE ----------
   * The retainer is the hero; the setup fee is a footnote.
   */
  --price-hero-size:    44px;
  --price-setup-size:   13px;
  --price-rail-save-bg: var(--vb-teal-50);
  --price-rail-save-fg: var(--vb-teal-700);

  /* ---------- LOCALE TYPE METRICS ----------
   * vi runs 10–25% longer than en; zh runs 30–40% shorter.
   */
  --font-display-zh: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-body-zh:    'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --leading-vi:      1.64;
  --leading-zh:      1.72;

  /* ---------- GRADIENTS / OVERLAYS ----------
   * Used over hero photography to keep eyebrow + headline legible.
   */
  --overlay-navy:  linear-gradient(90deg, rgba(27, 58, 107, 0.86) 0%, rgba(27, 58, 107, 0.55) 60%, rgba(27, 58, 107, 0.25) 100%); /* @kind color */
  --overlay-teal:  linear-gradient(135deg, rgba(0, 105, 109, 0.82) 0%, rgba(0, 105, 109, 0.40) 100%); /* @kind color */
  --overlay-dark:  linear-gradient(180deg, rgba(6, 15, 28, 0.0) 0%, rgba(6, 15, 28, 0.65) 100%); /* @kind color */

  /* Decorative gold underline used under emphasis words in headlines */
  --gold-underline: linear-gradient(90deg, transparent 0%, var(--vb-gold-400) 18%, var(--vb-gold-400) 82%, transparent 100%);
}

/* =============================================================
 * SEMANTIC ELEMENT STYLES
 * Plain HTML elements pick up brand defaults; can be overridden.
 * ============================================================= */

html, body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .display, .h-display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin: 0;
}

h1, .h1 { font-size: clamp(40px, 5.6vw, var(--text-5xl)); font-weight: 600; }
h2, .h2 { font-size: clamp(32px, 4.4vw, var(--text-4xl)); font-weight: 600; }
h3, .h3 { font-size: var(--text-3xl); font-weight: 600; line-height: var(--leading-snug); }
h4, .h4 { font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-snug); }
h5, .h5 { font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-snug); }
h6, .h6 { font-size: var(--text-lg); font-weight: 600; }

/* The signature italic emphasis used in headlines, e.g. "Vietnam and the *world*" */
h1 em, h2 em, h3 em, .h-emph {
  font-style: italic;
  font-weight: 500;
  color: var(--vb-teal-500);
  position: relative;
}

/* Eyebrow / section label */
.eyebrow, .h-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--vb-teal-500);
}

p, .p { font-size: var(--text-md); line-height: var(--leading-base); color: var(--fg-2); margin: 0; text-wrap: pretty; }
.lede { font-size: var(--text-xl); line-height: 1.45; color: var(--fg-2); font-weight: 400; }
.small, small { font-size: var(--text-sm); color: var(--fg-3); }
.caption { font-size: var(--text-xs); color: var(--fg-3); letter-spacing: 0.02em; }

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

hr, .divider {
  border: 0;
  height: 1px;
  background: var(--border-1);
  margin: var(--space-6) 0;
}

/* Decorative gold rule, often under section labels */
.gold-rule {
  height: 2px;
  width: 56px;
  background: var(--vb-gold-400);
  border-radius: 999px;
  display: inline-block;
}

/* =============================================================
 * LOCALE ADAPTATION  (added Aug 2026)
 * Set lang on <html> (or any subtree). Everything below is opt-in
 * by language attribute, so the English reference is untouched.
 * ============================================================= */

/* Vietnamese \u2014 diacritics stack above AND below the line; needs air. */
[lang="vi"] { line-height: var(--leading-vi); }
[lang="vi"] h1, [lang="vi"] h2, [lang="vi"] h3, [lang="vi"] h4 { line-height: 1.16; }
[lang="vi"] .eyebrow { letter-spacing: 0.12em; }   /* tracked caps + diacritics fight; ease off */
[lang="vi"] td, [lang="vi"] th { padding-block: 7px; }  /* never clip a \u0323 or \u0309 in a dense table */

/* Chinese \u2014 no Latin display face has CJK glyphs, and zh does not use italics. */
[lang="zh"] { font-family: var(--font-body-zh); line-height: var(--leading-zh); }
[lang="zh"] h1, [lang="zh"] h2, [lang="zh"] h3, [lang="zh"] h4, [lang="zh"] h5, [lang="zh"] h6,
[lang="zh"] .display, [lang="zh"] .h-display { font-family: var(--font-display-zh); letter-spacing: 0; line-height: 1.3; }
[lang="zh"] .eyebrow { letter-spacing: 0.08em; }   /* CJK is already visually tracked */
/* THE SIGNATURE DEVICE, SUBSTITUTED.
 * Our headline emphasis is roman + italic. Chinese has no italic \u2014 a
 * synthesised slant looks broken. Substitute: teal + the gold underline,
 * which is the half of the device that already carries the brand. */
[lang="zh"] h1 em, [lang="zh"] h2 em, [lang="zh"] h3 em, [lang="zh"] .h-emph {
  font-style: normal;
  font-weight: 600;
  color: var(--vb-teal-500);
  background-image: var(--gold-underline);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  padding-bottom: 0.12em;
}

/* =============================================================
 * DARK MODE  (added Aug 2026)
 * Required by both mobile briefs; likely the default in the staff
 * app. Opt in with data-theme="dark" on <html> or any container.
 * Surfaces are navy-derived, never neutral black.
 * ============================================================= */
[data-theme="dark"] {
  --fg-1: #EAEFF7;
  --fg-2: #B7C2D4;
  --fg-3: #8B97AB;
  --fg-4: #5F6B7E;
  --fg-link: #57A6AB;
  --fg-link-hover: #8FC4C8;
  --fg-accent: #57A6AB;
  --bg-1: #0A121D;
  --bg-2: #111C2B;
  --bg-3: #172433;
  --bg-tinted: #14202E;
  --bg-dark: #060F1C;
  --border-1: #23334A;
  --border-2: #31445E;
  --border-focus: #57A6AB;
  --status-ontrack-fg: #7FCBA1;
  --status-ontrack-bg: #12271D;
  --status-ontrack-border: #265739;
  --status-attention-fg: #E0C273;
  --status-attention-bg: #2A2213;
  --status-attention-border: #5E4C1E;
  --status-urgent-fg: #F0A257;
  --status-urgent-bg: #2B1C0D;
  --status-urgent-border: #6B4013;
  --status-breach-fg: #EE93A0;
  --status-breach-bg: #2B141A;
  --status-breach-border: #6B2932;
  --dir-outbound-bg: #0C2B2C;
  --dir-outbound-fg: #7FC3C6;
  --dir-inbound-bg:  #14243D;
  --dir-inbound-fg:  #9FB8DA;
  --ai-bg: #141E2C;
  --ai-border: #384B63;
  --ai-label: #93A0B4;
  --ai-fg: #C3CDDC;
  --ai-caveat-bg: #241E10;
  --ai-caveat-border: #5A4A1C;
  --ai-caveat-fg: #DEBE63;
  --agent-bubble-agent: #172433;
  --agent-bubble-human: #14243D;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.55);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.6);
  --shadow-card-hover: 0 18px 40px rgba(0,0,0,0.55);
}

/* =============================================================
 * FOCUS \u2014 non-negotiable, WCAG 2.1 AA
 * ============================================================= */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 5px var(--border-focus);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}