/* ============================================================
   Custom Domain Portal — Base
   Variables, Reset, Typography, Layout Utilities
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-base:     #080C18;
  --bg-surface:  #0F1422;
  --bg-card:     #151C2E;
  --bg-card-alt: #1A2235;
  --bg-input:    #1E2740;
  --bg-hover:    rgba(99,102,241,.08);

  /* Borders */
  --border:      rgba(255,255,255,.07);
  --border-focus: rgba(99,102,241,.5);

  /* Accent */
  --accent:      #6366F1;
  --accent-2:    #818CF8;
  --accent-dark: #4F46E5;
  --accent-glow: rgba(99,102,241,.2);

  /* Semantic */
  --success:     #10B981;
  --success-bg:  rgba(16,185,129,.12);
  --warning:     #F59E0B;
  --warning-bg:  rgba(245,158,11,.12);
  --danger:      #EF4444;
  --danger-bg:   rgba(239,68,68,.12);
  --info:        #3B82F6;
  --info-bg:     rgba(59,130,246,.12);

  /* Text */
  --text-1: #F1F5F9;
  --text-2: #94A3B8;
  --text-3: #475569;

  /* Layout */
  --sidebar-w: 240px;
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow: 0 4px 24px rgba(0,0,0,.4);
  --shadow-card: 0 2px 12px rgba(0,0,0,.3);
}

/* ── Light Theme ────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:     #F0F4F8;
  --bg-surface:  #FFFFFF;
  --bg-card:     #FFFFFF;
  --bg-card-alt: #F1F5F9;
  --bg-input:    #F8FAFC;
  --bg-hover:    rgba(99,102,241,.06);

  --border:      rgba(0,0,0,.09);
  --border-focus: rgba(99,102,241,.45);

  --text-1: #0F172A;
  --text-2: #475569;
  --text-3: #94A3B8;

  --shadow: 0 4px 24px rgba(0,0,0,.08);
  --shadow-card: 0 2px 12px rgba(0,0,0,.05);
}

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

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

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg-base);
  color: var(--text-1);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--text-1); }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--bg-card-alt); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }

/* ── Typography ─────────────────────────────────────────────── */
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 1rem;    font-weight: 600; }
h4 { font-size: .875rem; font-weight: 600; }
p  { color: var(--text-2); line-height: 1.7; }

/* ── Layout Utils ───────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2  { gap: .5rem; }
.gap-3  { gap: .75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.w-full { width: 100%; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }