/* =============================================================
   base.css — CSS Variables, Reset, Typography, Scrollbar
   AQCore © 2026
   ============================================================= */

/* ── DESIGN TOKENS ── */
:root {
  --bg-primary:    #0A192F;
  --bg-secondary:  #112240;
  --bg-tertiary:   #0D1B2E;
  --bg-card:       rgba(17, 34, 64, 0.85);

  --accent:        #38BDF8;
  --accent-hover:  #4FD1FF;
  --accent-dim:    rgba(56, 189, 248, 0.12);
  --accent-dim2:   rgba(56, 189, 248, 0.06);

  --text-primary:   #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;

  --border:        rgba(56, 189, 248, 0.10);
  --border-hover:  rgba(56, 189, 248, 0.30);
  --glass:         rgba(17, 34, 64, 0.70);
  --glass-border:  rgba(56, 189, 248, 0.15);

  --shadow:        0 8px 32px rgba(0, 0, 0, 0.40);
  --shadow-accent: 0 4px 24px rgba(56, 189, 248, 0.15);

  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --nav-height: 70px;
}

[data-theme="light"] {
  --bg-primary:    #F0F4F8;
  --bg-secondary:  #E2EBF5;
  --bg-tertiary:   #D9E4F0;
  --bg-card:       rgba(255, 255, 255, 0.85);

  --accent:        #0284C7;
  --accent-hover:  #0369A1;
  --accent-dim:    rgba(2, 132, 199, 0.10);
  --accent-dim2:   rgba(2, 132, 199, 0.05);

  --text-primary:   #0F172A;
  --text-secondary: #334155;
  --text-muted:     #64748B;

  --border:        rgba(2, 132, 199, 0.15);
  --border-hover:  rgba(2, 132, 199, 0.40);
  --glass:         rgba(255, 255, 255, 0.75);
  --glass-border:  rgba(2, 132, 199, 0.20);

  --shadow:        0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-accent: 0 4px 24px rgba(2, 132, 199, 0.20);
}

/* ── RESET ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
  line-height: 1.5;
}

img,
video {
  max-width: 100%;
  display: block;
}

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

/* ── CUSTOM SCROLLBAR ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

/* ── UTILITY ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}