/* ───────────────────────────────────────────────────────────────
   Design tokens. Sourced from the DM Industries brand and the
   approved hero reference: black, dark charcoal, DM red, white,
   metallic greys. Nothing outside this palette is used anywhere.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* Surface — darkest at the top of the page, lifting as panels stack */
  --surface-void:      #000000;
  --surface-base:      #08090a;
  --surface-raised:    #101214;
  --surface-panel:     #16191c;
  --surface-line:      #24292e;

  /* DM red. -hot for glow and lighting, -deep for pressed states */
  --red:               #e1141c;
  --red-hot:           #ff2d36;
  --red-deep:          #a30d14;
  --red-glow:          rgba(225, 20, 28, 0.45);

  /* Metallic greys — the tool steel range */
  --steel-100:         #f2f4f5;
  --steel-200:         #d4d8db;
  --steel-300:         #a8aeb4;
  --steel-400:         #7d848b;
  --steel-500:         #565c62;
  --steel-600:         #3a3f44;

  /* Text */
  --text-primary:      #ffffff;
  --text-secondary:    var(--steel-300);
  --text-muted:        var(--steel-400);
  /* Small print (footer, spec labels, hints). Meets WCAG AA 4.5:1 on every surface. */
  --text-faint:        #7d848b;
  /* Red used as TEXT. The brand red (#e1141c) is 3.6–4.3:1 on the dark
     surfaces, below AA for small type, so small red text uses the hot red.
     Buttons and fills keep --red. */
  --red-text:          var(--red-hot);

  /* Type. Two families, clearly distinct:
     a condensed grotesque for headlines, a neutral sans for reading. */
  --font-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale, 1.25 minor third off a 16px base */
  --size-xs:    0.75rem;
  --size-sm:    0.875rem;
  --size-base:  1rem;
  --size-md:    1.25rem;
  --size-lg:    1.563rem;
  --size-xl:    1.953rem;
  --size-2xl:   2.441rem;
  --size-3xl:   3.052rem;
  --size-4xl:   4.2rem;
  --size-hero:  clamp(2.75rem, 7.2vw, 6.5rem);

  --tracking-tight:  -0.02em;
  --tracking-wide:   0.18em;

  /* Spacing, 8px rhythm */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-10: 8rem;

  /* Structure */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shell-max: 1440px;
  --shell-pad: clamp(1.25rem, 4vw, 4rem);
  --nav-height: 84px;

  /* Motion — one shared easing language across the whole site */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   680ms;

  --z-wheel: 10;
  --z-nav:   80;
  --z-menu:  90;
  --z-modal: 100;
}

@media (max-width: 768px) {
  :root { --nav-height: 64px; }
}

/* ───────────────────────────────────────────────────────────────
   LIGHT THEME

   Set on <html data-theme="light">. Only tokens are redefined, so
   every component follows without touching a single component rule.

   The steel scale inverts: --steel-300 means "secondary text" in both
   themes, so it must be light on dark and dark on light.
   ─────────────────────────────────────────────────────────────── */
[data-theme='light'] {
  --surface-void:   #ffffff;
  --surface-base:   #f3f5f6;
  --surface-raised: #ffffff;
  --surface-panel:  #e9ecee;
  --surface-line:   #d5dadd;

  --steel-100: #0d0f11;
  --steel-200: #23282d;
  --steel-300: #454c52;
  --steel-400: #5f666d;
  --steel-500: #8b9298;
  --steel-600: #c2c7cb;

  --text-primary:   #0b0d0e;
  --text-secondary: #454c52;
  --text-muted:     #5f666d;
  --text-faint:     #5f666d;

  /* Red darkens slightly so it still passes contrast on white. */
  --red:      #c8101a;
  --red-hot:  #e1141c;
  --red-deep: #8f0b12;
  --red-glow: rgba(200, 16, 26, 0.28);
  --red-text: #c8101a;
}


[data-theme='light'] .nav.is-solid { background: rgba(255, 255, 255, 0.9); }
/* Before the bar turns solid it floats over the hero photo; a light fade
   keeps the logo and links readable on the daylight plate. */
[data-theme='light'] .nav:not(.is-solid) { background: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0)) border-box no-repeat; }

/* Theme changes should not animate on first paint. */
html.theme-ready body,
html.theme-ready .nav,
html.theme-ready .pcard,
html.theme-ready .acard {
  transition: background-color 260ms var(--ease-out), color 260ms var(--ease-out),
              border-color 260ms var(--ease-out);
}