/* Website UI foundations v0.2 — graphics, gradients and SVG palettes are separate. */
:root {
  --color-label-white: #ecedee;
  --color-ink: #0c0c0d;
  --color-aluminum: #c9cdd1;
  --color-machined: #8a9097;
  --color-archive: #4a4f56;
  --color-muted-light: #636974;
  --color-text-muted: #8e9299;
  --color-text-secondary: #949ba3;
  --color-blue: #2b3dff; /* F4GE Blue = Blue 60 (company D-013) */
  --color-blue-on-dark: #78a1fa; /* Blue 40: small blue text and marks on dark, as the Brand Kit names it (user, 2026-11-07). */
  --color-blue-pressed: #2034bb; /* Blue 70: pressed state of a blue action */
  --color-paper: #ffffff; --color-field: #111316;
  --color-rule-dark: #33363b; --color-rule-light: #d4d7db;
  --color-true-black: #000000; --color-legacy-muted: #5c6168;
  --text-primary: var(--color-label-white);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --text-inverse: var(--color-ink);
  --text-on-dark: var(--color-label-white);
  --text-on-action-blue: var(--color-paper);
  --text-on-light: var(--color-ink);
  /* Accent text is used on light surfaces. Keep dark-surface small copy neutral. */
  --text-accent: var(--color-blue);
  --space-0: 0px; --space-4: 4px; --space-8: 8px; --space-12: 12px;
  --space-16: 16px; --space-24: 24px; --space-32: 32px;
  --space-48: 48px; --space-64: 64px; --space-96: 96px;
  --radius-none: 0px; --radius-pill: 999px;
  --stroke-rule: 1px; --stroke-focus: 2px;
}
.data-page #main, .mfg-paper, #main > section:is(#industries, #enquiry) {
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --text-inverse: var(--color-label-white);
}
/* About reveal: pending text uses 30% primary ink; revealed text stays fully opaque. */
.about-description[data-scroll-fill] .about-word {
  background-image: linear-gradient(90deg,var(--text-primary) var(--word-fill,0%),color-mix(in srgb,var(--text-primary) 30%,transparent) var(--word-fill,0%));
}
@media (prefers-reduced-motion: reduce) {
  .about-description[data-scroll-fill] .about-word { color: var(--text-primary); background: none; }
}
@media (forced-colors: active) {
  .about-description[data-scroll-fill] .about-word { color: CanvasText; background: none; }
}