/* ============================================================
   new-theme.css
   CSS custom properties (design tokens) for the red accent
   theme. Load this FIRST — all other new-*.css files depend
   on these variables.

   Usage:
     <link rel="stylesheet" href="new-theme.css">
   ============================================================ */

:root {
  /* ── Red accent palette ── */
  --new-accent:          #c0392b;
  --new-accent-dark:     #a93226;
  --new-accent-soft:     rgba(192, 57, 43, 0.08);
  --new-accent-border:   rgba(192, 57, 43, 0.20);
  --new-accent-glow:     rgba(192, 57, 43, 0.13);

  /* ── Shape ── */
  --new-radius:          0px;
  --new-radius-sm:       4px;
  --new-radius-pill:     20px;

  /* ── Motion ── */
  --new-transition:      0.25s ease;
  --new-transition-slow: 0.45s ease;

  /* ── Keyframe animations (declared here, used everywhere) ── */
}

[data-theme="dark"] {
  --new-accent:          #e05444;
  --new-accent-dark:     #c0392b;
  --new-accent-soft:     rgba(224, 84, 68, 0.09);
  --new-accent-border:   rgba(224, 84, 68, 0.22);
  --new-accent-glow:     rgba(224, 84, 68, 0.11);
}

/* ── Global keyframes (shared across all partials) ── */
@keyframes new-riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes new-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes new-slideLeft {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes new-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Scroll reveal utility ── */
.new-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.new-reveal.new-reveal--in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Inline text helpers ── */
.new-text-accent { color: var(--new-accent) !important; }
.new-text-muted  { color: var(--color-text-secondary) !important; }
.new-text-mono   { font-family: var(--font-code) !important; }
.new-font-bold   { font-weight: 700 !important; }
.new-font-light  { font-weight: 300 !important; }

/* ── Spacing utilities ── */
.new-mt-0  { margin-top: 0 !important; }
.new-mb-0  { margin-bottom: 0 !important; }
.new-mt-sm { margin-top: 1rem !important; }
.new-mb-sm { margin-bottom: 1rem !important; }
.new-mt-md { margin-top: 2.5rem !important; }
.new-mb-md { margin-bottom: 2.5rem !important; }
.new-mt-lg { margin-top: 4rem !important; }
.new-mb-lg { margin-bottom: 4rem !important; }

/* ── Divider ── */
.new-divider {
  width: 100%;
  height: 1px;
  background: var(--color-header-border);
  margin: 0;
}

/* ── Generic reusable card ── */
.new-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--new-radius-sm);
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--new-transition), background var(--new-transition);
}
.new-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--new-accent);
  transition: height 0.35s ease;
}
.new-card:hover { box-shadow: 0 8px 24px var(--color-card-shadow-hover); }
.new-card:hover::before { height: 100%; }

/* ── Badge / pill ── */
.new-badge {
  font-family: var(--font-code);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  background: var(--new-accent-soft);
  color: var(--new-accent);
  border: 1px solid var(--new-accent-border);
  border-radius: var(--new-radius-pill);
  display: inline-block;
}