/*
  Design tokens — single source of truth for color, type, spacing, and the
  breakpoint values referenced throughout styles.css. Do not hardcode a hex
  color or px spacing value directly in a rule; add or reuse a token here.

  Breakpoints can't live in a CSS custom property (media queries don't
  accept var()), so the two numbers below are duplicated at each @media
  boundary in styles.css. If you change TOKEN_MOBILE_MAX or
  TOKEN_TABLET_MAX, grep styles.css for "480px" and "900px" and update
  every match.
*/
:root {
  /* Color */
  --color-navy: #0b2a4a;      /* Deep Navy — primary brand, light-surface CTAs */
  --color-ink: #071320;       /* Ink Navy — dark section backgrounds */
  --color-blueprint: #1f5fe0; /* Blueprint — interface accent, links, primary CTA */
  --color-blueprint-hover: #3b74e8;
  --color-brass: #b08a4a;     /* Brass — accent only, keep under 10% of any view */
  --color-paper: #f4f5f6;     /* Paper — light surfaces, on-dark text */
  --color-white: #ffffff;
  --color-error: #e0785a;
  --color-success: #7fd1a8;

  /* Surfaces derived from the palette above */
  --surface-paper: var(--color-paper);
  --surface-ink: var(--color-ink);
  --surface-navy: var(--color-navy);

  /* Text-on-dark opacity steps (mirrors the design's inline opacity values) */
  --on-dark-100: rgba(244, 245, 246, 1);
  --on-dark-85: rgba(244, 245, 246, 0.85);
  --on-dark-78: rgba(244, 245, 246, 0.78);
  --on-dark-72: rgba(244, 245, 246, 0.72);
  --on-dark-60: rgba(244, 245, 246, 0.6);
  --on-dark-55: rgba(244, 245, 246, 0.55);

  /* Type */
  --font-zh: "Noto Sans TC", sans-serif;
  --font-latin: "Archivo", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Spacing scale — derived from the clamp() values used across sections */
  --space-2xs: 6px;
  --space-xs: 12px;
  --space-sm: 18px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;

  /* Section padding — fluid, matches the mockup's clamp() pattern */
  --section-pad-y: clamp(70px, 9vw, 110px);
  --section-pad-x: clamp(24px, 6vw, 64px);

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;

  /* Breakpoints — see comment above; kept as a documented reference only */
  --bp-mobile-max: 480px;
  --bp-tablet-max: 900px;
}