/*
 * DIGITAL PIPS — Global CSS
 * Loaded after external fonts/icon styles and before the page-specific stylesheet.
 * The existing Tailwind CDN, custom Tailwind configs, and original DOM classes stay intact.
 * Opt-in rules for the four informational pages use .dp-info-page to avoid affecting Tailwind pages.
 */

/* Shared design tokens; existing values are preserved exactly. */
:root {
  --bg: #030712;
  --surface: #111827;
  --surface2: #1f2937;
  --muted: #9ca3af;
  --line: #374151;
  --gold: #f59e0b;
  --dp-gold-light: #fbbf24;
  --dp-font: 'Inter', sans-serif;
  --dp-space-xs: 8px;
  --dp-space-sm: 12px;
  --dp-space-md: 20px;
  --dp-space-lg: 30px;
}

/* Applied on original main pages; pages.css still sets its original body shorthand. */
body {
  font-family: 'Inter', sans-serif;
  background-color: #030712;
}

/* Glass header shared by index/store/404; tools.css overrides border to all four edges. */
.glass-panel {
  background: rgba(31, 41, 55, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(75, 85, 99, 0.4);
}

/* Shared logo animation, preserving original timing and appearance. */
.typewriter-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: none;
  vertical-align: bottom;
  animation: typing-loop 4s steps(30, end) infinite;
}
@keyframes typing-loop {
  0%, 10% { max-width: 0; }
  40%, 70% { max-width: 100%; }
  90%, 100% { max-width: 0; }
}

/* Card motion shared; the amount of lift / shadow remains page-specific. */
.hover-grow {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hover-grow:hover {
  border-color: rgba(245, 158, 11, 0.3);
}

/* Re-used by index and store marquees; each page sets its own duration. */
@keyframes scroll-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Shared informational-page links, layout and form font inheritance.
 * Explicit scope prevents accidental overrides of Tailwind buttons / layouts. */
:where(.dp-info-page) a { color: inherit; text-decoration: none; }
:where(.dp-info-page) a:hover { color: #fbbf24; }
:where(.dp-info-page) button { font: inherit; }
:where(.dp-info-page) input,
:where(.dp-info-page) select,
:where(.dp-info-page) textarea { font: inherit; }
:where(.dp-info-page) .shell {
  width: min(1150px, calc(100% - 40px));
  margin: auto;
}

/* Card design shared across all four informational pages. */
:where(.dp-info-page) .card {
  border: 1px solid #333f50;
  background: linear-gradient(140deg, rgba(31,41,55,.90), rgba(10,16,30,.96));
  border-radius: 22px;
  padding: 30px;
  min-height: 200px;
  box-shadow: 0 18px 34px rgba(0,0,0,.11);
}
:where(.dp-info-page) .card h2 { font-size: 22px; margin: 0 0 10px; }
:where(.dp-info-page) .card h3 { font-size: 17px; margin: 0 0 9px; }
:where(.dp-info-page) .card p { color: #aab2c1; line-height: 1.8; margin: 0 0 16px; }
:where(.dp-info-page) .card p:last-child { margin-bottom: 0; }

/* Shared informational-page action and button system. Other pages keep Tailwind controls. */
:where(.dp-info-page) .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin: 28px 0;
}
:where(.dp-info-page) .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: 1px solid #56616f;
  border-radius: 999px;
  padding: 12px 25px;
  font-weight: 750;
  color: #f9fafb;
  transition: transform .2s, background .2s;
}
:where(.dp-info-page) .btn:hover {
  transform: translateY(-2px);
  color: white;
  background: #334155;
}
:where(.dp-info-page) .btn.primary {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #0f172a;
}
:where(.dp-info-page) .btn.primary:hover {
  background: #fbbf24;
  color: #0f172a;
}