/* ============================================================
   Lakshmi VinFast — Design Tokens
   Exact values used across the canvas, exposed as CSS custom
   properties. The pages render from inline styles (see
   EXPORT-README.md → "Could not be exported faithfully"); these
   tokens document the source-of-truth values and are available
   for any future refactor to var()-based styling.
   ============================================================ */
:root {
  /* ---- Color: surfaces (dark blue-black theme) ---- */
  --color-bg:            #05070C; /* page / hero base */
  --color-bg-2:          #0B0F18; /* banner base */
  --color-surface:       #0E1420; /* footer / panels */
  --color-card:          #0F1522; /* cards, media wells */
  --color-card-alt:      #141A28; /* image-slot wells */

  /* ---- Color: brand + accent ---- */
  --color-accent:        #4C9BE8; /* VinFast blue — CTAs, eyebrows */
  --color-accent-tint:   #8FC3FF; /* links, highlights on dark */

  /* ---- Color: text ---- */
  --color-text:          #FFFFFF; /* headings on dark */
  --color-text-strong:   #EAF1FB; /* 404 body */
  --color-text-1:        #D7E2EF; /* lead paragraphs */
  --color-text-2:        #93A6BC; /* body copy */
  --color-text-3:        #9AA0A9; /* muted / addresses */
  --color-text-4:        #8492A2; /* footer legal bar */
  --color-text-5:        #6C7A8C; /* timestamps */

  /* ---- Color: hairlines / overlays ---- */
  --border-hairline:     rgba(255,255,255,.10);
  --border-hairline-2:   rgba(255,255,255,.14);
  --divider:             rgba(255,255,255,.28);

  /* ---- Typography ---- */
  --font-display: 'Sora', system-ui, sans-serif;      /* headings */
  --font-body:    'Manrope', system-ui, sans-serif;   /* body / UI */
  --font-serif:   'Instrument Serif', Georgia, serif; /* accent italics */

  /* Type scale (px, from the canvas) */
  --fs-eyebrow:   12.5px;   --ls-eyebrow: .16em;
  --fs-body-sm:   13.5px;
  --fs-body:      15.5px;   --lh-body: 1.6;
  --fs-lead:      17px;
  --fs-h3:        20px;
  --fs-h2:        34px;     --ls-h2: -.02em;
  --fs-hero-md:   44px;
  --fs-hero:      52px;     --ls-hero: -.03em;
  --fs-display:   70px;     --ls-display: -.03em;
  --fw-regular:   400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-x: 800;

  /* ---- Spacing (px, recurring in the canvas) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 18px; --space-6: 22px; --space-7: 26px; --space-8: 28px;
  --space-9: 38px; --space-10: 44px; --space-11: 56px; --space-12: 62px;
  --space-13: 80px; --space-14: 90px;

  /* ---- Radii ---- */
  --radius-sm: 11px; --radius-md: 14px; --radius-lg: 18px;
  --radius-xl: 22px; --radius-pill: 999px;

  /* ---- Layout ---- */
  --content-max: 1200px;   --content-max-wide: 1240px;   --content-max-narrow: 900px;

  /* ---- Breakpoints (documented; used via @media in pages) ---- */
  --bp-mobile: 480px;   /* single-column, sliders, ≥44px tap targets */
  --bp-tablet: 768px;   /* condensed nav / grid reflow */
}