/*
Design tokens extracted directly from the approved design-comp HTML
(Front Page.dc.html / Product Detail.dc.html / Grade Single.dc.html).
Do not hand-pick new colors/fonts elsewhere in the theme — add a token here
and reference it, so the three comps and the live theme never drift apart.
*/

:root {
  /* ---- Color: brand ---- */
  --color-navy: #1A3A5C;        /* 工业深海军蓝 — primary brand color */
  --color-navy-dark: #0A1830;   /* nav / footer / gradient start — deepened for hero overlay contrast */
  --color-navy-mid: #1c3f63;    /* hero gradient end — deepened to sit under photography */
  --color-hero-overlay: linear-gradient(100deg, rgba(10,24,48,0.94) 0%, rgba(10,24,48,0.78) 38%, rgba(10,24,48,0.32) 75%, rgba(10,24,48,0.12) 100%);
  --color-gold: #D4A017;        /* 工业金 — CTA buttons, P1 tags, stat highlights */
  --color-bg: #F5F7FA;          /* 流云白 — page background */
  --color-text: #2C3E50;        /* 正文色 */
  --color-border: #E0E6ED;      /* dividers / card borders */
  --color-badge-green: #27AE60; /* certification / trust badge accent */

  /* ---- Color: derived / supporting (sampled from comps) ---- */
  --color-text-muted: #5a6b7d;
  --color-nav-text: #C9D4E0;
  --color-card-alt: #FBFCFD;    /* zebra-striped table rows */
  --color-chip-bg: #EEF2F6;     /* pill / tag backgrounds */
  --color-surface: #FFFFFF;
  --color-hero-diagram: #2a4d73;

  /* ---- Typography ---- */
  --font-display: 'Barlow Condensed', sans-serif; /* headings — 700 */
  --font-body: 'Inter', sans-serif;                /* body copy — 400/500/600 */
  --font-mono: 'IBM Plex Mono', monospace;         /* specs, grades, stats — 400/500 */

  /* ---- Spacing scale (sampled from comp padding values) ---- */
  --space-xs: 10px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 36px;
  --space-xl: 56px;
  --space-2xl: 80px;   /* comp section side padding */
  --space-3xl: 110px;  /* comp section vertical padding */

  /* ---- Radius / borders ---- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 20px;

  /* ---- Layout ---- */
  --container-max: 1400px;
  --header-height: 78px;

  /* ---- Shadows ---- */
  --shadow-card-hover: 0 20px 40px -12px rgba(26, 58, 92, 0.25);
  --shadow-form-hover: 0 8px 20px -8px rgba(26, 58, 92, 0.2);

  /* ---- Breakpoints (referenced in comments; media queries use literals) ---- */
  /* mobile   : < 768px  */
  /* tablet   : 768px – 1024px */
  /* desktop  : > 1024px */
}