/* ══════════════════════════════════════════════════════════════════
   Inurum Technologies — Shared Product Page Styles
   ══════════════════════════════════════════════════════════════════ */

:root {
  --header-height: 64px;
}

:root,
[data-theme="dark"] {
  --bg-nav: rgba(8, 12, 20, 0.88);
  --border: rgba(255, 255, 255, 0.08);
  --border-h: rgba(255, 255, 255, 0.18);
  --text-h: #f5f5f7;
  --text-p: #9ca3af;
  --text-muted: #6b7280;
  --text-on-acc: #000000;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 0, 0, 0.5);
  --bg-card: rgba(255, 255, 255, 0.035);
  --bg-card-h: rgba(255, 255, 255, 0.07);
}

[data-theme="light"] {
  --bg-nav: rgba(255, 255, 255, 0.92);
  --border: rgba(0, 0, 0, 0.08);
  --border-h: rgba(0, 0, 0, 0.15);
  --text-h: #111827;
  --text-p: #4b5563;
  --text-muted: #9ca3af;
  --text-on-acc: #ffffff;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-deep: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  --bg-card: rgba(243, 244, 246, 0.92);
  --bg-card-h: rgba(255, 255, 255, 1);
}

html {
  scroll-behavior: smooth;
  transition: background-color 0.4s ease;
}

body {
  padding-top: var(--header-height);
  transition: background-color 0.4s ease, color 0.35s ease;
}

section {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

/* Common Layout and Transition Helper Classes */
.glass-card, 
.site-header, 
.ss-nav-links, 
.theme-toggle, 
.ss-mobile-toggle,
.ss-modal-overlay,
.ss-modal {
  transition:
    background-color 0.35s ease,
    background 0.35s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}