/* ============================================================
   HotTrends — Base CSS Variables (Design Tokens)
   Dark theme as default with red accent
   ============================================================ */
:root {
  /* Tell browsers to render form controls/scrollbars in dark mode by default */
  color-scheme: dark;

  /* ── Colors (Dark Theme) ─────────────────────────────────── */
  --accent-color: #d4382c;
  --accent-color-hover: #ef4b3f;
  --accent-soft: rgba(212, 56, 44, 0.14);
  --bg-primary: #08090b;
  --bg-secondary: #101216;
  --bg-nav: rgba(8, 9, 11, 0.88);
  --bg-card: #15171d;
  --bg-card-hover: #1c2028;
  --bg-footer: #090a0d;
  --footer-bg: #090a0d;
  --text-primary: #f4f7fb;
  --text-secondary: #b5becb;
  --text-muted: #737d8c;
  --border-color: rgba(255, 255, 255, 0.09);
  --border-light: rgba(255, 255, 255, 0.16);
  --highlight-bg: rgba(212, 56, 44, 0.10);
  --overlay-gradient: linear-gradient(
    to top,
    rgba(3, 4, 6, 0.94) 0%,
    rgba(3, 4, 6, 0.58) 46%,
    rgba(3, 4, 6, 0.16) 74%,
    transparent 100%
  );
  --search-bg: #15171d;
  --search-border: rgba(255, 255, 255, 0.14);
  --search-text: #f4f7fb;
  --ticker-bg: #0d0f13;

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Inter', 'Noto Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Noto Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

  --size-hero-title: 42px;
  --size-card-title: 20px;
  --size-body: 16px;
  --size-meta: 12px;
  --size-nav: 14px;
  --size-logo: 18px;
  --size-footer: 13px;

  --line-body: 1.7;
  --line-hero-title: 1.15;
  --line-card-title: 1.35;
  --line-logo: 1.2;
  --line-nav: 1.4;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width: 1200px;
  --header-height: 56px;

  /* ── Borders ─────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
  --card-shadow-hover: 0 18px 54px rgba(0, 0, 0, 0.52);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Global foundation — the missing part that restores dark UI
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 16% -8%, rgba(212, 56, 44, 0.18), transparent 34rem),
    radial-gradient(circle at 92% 8%, rgba(37, 99, 235, 0.10), transparent 30rem),
    linear-gradient(180deg, var(--bg-primary) 0%, #0b0d11 48%, var(--bg-primary) 100%);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--line-body);
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.72), transparent 70%);
}

main {
  display: block;
  background: transparent;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

img,
picture,
svg,
video,
canvas {
  max-width: 100%;
}

/* Optional light mode exists only when the user explicitly toggles it. */
:root.light-mode {
  color-scheme: light;
  --bg-primary: #f7f4ef;
  --bg-secondary: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.88);
  --bg-card: #ffffff;
  --bg-card-hover: #fff8f6;
  --bg-footer: #f0ebe4;
  --footer-bg: #f0ebe4;
  --text-primary: #151515;
  --text-secondary: #4d5663;
  --text-muted: #747b86;
  --border-color: rgba(20, 20, 20, 0.10);
  --border-light: rgba(20, 20, 20, 0.16);
  --highlight-bg: rgba(212, 56, 44, 0.08);
  --overlay-gradient: linear-gradient(to top, rgba(0,0,0,0.70), rgba(0,0,0,0.12), transparent);
  --search-bg: #ffffff;
  --search-border: rgba(20, 20, 20, 0.14);
  --search-text: #151515;
  --ticker-bg: #fff7f5;
  --card-shadow: 0 10px 28px rgba(20, 20, 20, 0.08);
  --card-shadow-hover: 0 18px 44px rgba(20, 20, 20, 0.15);
}

:root.light-mode body {
  background:
    radial-gradient(circle at 16% -8%, rgba(212, 56, 44, 0.12), transparent 34rem),
    radial-gradient(circle at 92% 8%, rgba(37, 99, 235, 0.08), transparent 30rem),
    linear-gradient(180deg, var(--bg-primary) 0%, #fffaf4 48%, var(--bg-primary) 100%);
}

/* ── Mobile Overrides ────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --size-hero-title: 28px;
    --size-card-title: 18px;
    --size-body: 16px;
    --space-4xl: 40px;
    --space-3xl: 32px;
  }
}