/* UpTrended shared design tokens + primitives.
   Linked by every page so a fix here applies everywhere — see CSS variables
   below for the light/dark palette, and shared components (noise/glow
   backdrop, theme toggle button, nav hamburger, a11y) further down. */

/* ut-nav/ut-footer (assets/components.js) are custom elements wrapping a
   real <nav>/<footer> — display:contents removes their own box so the wrapped
   element behaves exactly as if it were a direct child of <body>, same as before. */
ut-nav, ut-footer { display: contents; }

:root {
  --bg:            #f4f4f4;
  --bg-card:       #ffffff;
  --bg-card-2:     #f9f9f9;
  --border:        rgba(0,0,0,0.07);
  --border-glow:   rgba(0,0,0,0.18);
  --primary:       #0a0a0a;
  --primary-mid:   #333333;
  --primary-light: #666666;
  --pink:          #555555;
  --cyan:          #333333;
  --glow:          rgba(0,0,0,0.07);
  --text:          #0a0a0a;
  --text-muted:    #555555;
  --text-faint:    #aaaaaa;
  --grad:          linear-gradient(135deg, #0a0a0a 0%, #333333 100%);
  --grad-sub:      linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
  --btn-text:      #ffffff;
  --nav-bg:        rgba(244,244,244,0.88);
  --tint:          0,0,0;

  /* Divux brand (only used on /divux pages, harmless elsewhere) */
  --divux:         #ee4d33;
  --divux-2:       #f26b4f;
  --divux-grad:    linear-gradient(135deg, #ee4d33 0%, #f57a52 100%);
  --divux-tint:    238,77,51;

  --font:          'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --r:             16px;
  --r-sm:          10px;
  --r-lg:          24px;
}

html.dark {
  --bg:            #0a0a0a;
  --bg-card:       #111111;
  --bg-card-2:     #181818;
  --border:        rgba(255,255,255,0.07);
  --border-glow:   rgba(255,255,255,0.2);
  --primary:       #ffffff;
  --primary-mid:   #e5e5e5;
  --primary-light: #a3a3a3;
  --pink:          #888888;
  --cyan:          #d4d4d4;
  --glow:          rgba(255,255,255,0.08);
  --text:          #f5f5f5;
  --text-muted:    #9ca3af;
  --text-faint:    #4b5563;
  --grad:          linear-gradient(135deg, #ffffff 0%, #e5e5e5 100%);
  --grad-sub:      linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --btn-text:      #0a0a0a;
  --nav-bg:        rgba(0,0,0,0.8);
  --tint:          255,255,255;
}

/* Noise overlay + ambient glow backdrop, shared across every page */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025; pointer-events: none; z-index: 999;
}
/* Ambient glow blob — opt in with <body class="glow"> */
body.glow::after {
  content: ''; position: fixed; top: -200px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(var(--tint),.14), transparent 70%);
  pointer-events: none; filter: blur(20px);
}

/* Theme toggle button */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-muted); cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-glow); }
.theme-toggle svg { width: 16px; height: 16px; pointer-events: none; }

/* Nav hamburger + mobile menu (pages with a full nav) */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}
.nav-toggle:hover { border-color: var(--border-glow); }
.nav-toggle svg { width: 18px; height: 18px; pointer-events: none; }

.mobile-menu {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 190;
  padding: 4.75rem 1.25rem 1.5rem;
  background: var(--nav-bg);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .34s cubic-bezier(.4,0,.2,1), opacity .25s ease, visibility .34s;
}
.mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; }
.mobile-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem .35rem;
  font-size: 1.08rem; font-weight: 600;
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a svg { width: 18px; height: 18px; opacity: .4; }

/* Accessibility */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Don't show the focus ring on mouse click for native <details> toggles */
summary:focus:not(:focus-visible) { outline: none; }
/* In-page anchor targets clear the sticky/fixed nav when jumped to */
:target { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
