/* MCVisa public web — design tokens v0.2
   One source for colour, type, space and shape. Components read only these.
   Colour pairs used for text are checked in qa/contrast.json (WCAG 2.2 AA). */
:root {
  /* brand — sampled from the company logo (105 style tile) */
  --brand-green: #008445;        /* logo green; text-safe on white (see qa) */
  --brand-green-strong: #006634; /* hover / pressed; text on light tints */
  --brand-green-tint: #e8f4ee;   /* band backgrounds */
  --brand-gold: #c8942b;         /* logo wheat gold — decoration only, never body text */
  --brand-gold-text: #7a5410;    /* gold family for small text on white */
  --brand-gold-tint: #fbf4e6;

  /* neutrals */
  --ink: #16202a;          /* headings */
  --text: #2b3642;         /* body */
  --text-muted: #55606c;   /* secondary text, still AA on white and --surface-alt */
  --line: #d9dee3;         /* decorative dividers only */
  --line-strong: #7a8591;  /* form control borders: >= 3:1 on white */
  --surface: #ffffff;
  --surface-alt: #f5f7f6;
  --surface-dark: #10261b; /* footer */
  --on-dark: #eef4f0;
  --on-dark-muted: #b8c7be;

  /* status */
  --verify-bg: #fff4c2;    /* VERIFY_BEFORE_PUBLISH tag (review build only) */
  --verify-ink: #5c4500;
  --ok: #0a7a3d;
  --focus: #1a56db;        /* focus ring, distinct from brand green */

  /* type — system stacks only: zero font downloads */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --lh-tight: 1.25;
  --lh-body: 1.7;       /* CJK needs a looser leading than Latin */

  /* space — 4px base */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4.5rem;

  /* shape & layout */
  --radius-sm: 6px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 38, 27, .06), 0 4px 16px rgba(16, 38, 27, .06);
  --container: 1120px;
  --tap: 44px;          /* minimum touch target (WCAG 2.5.8 AAA-ish, practical) */
}