/* ============================================================
   CitationGuard AI — Base Styles (base.css)
   ============================================================ */
@import './variables.css';

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

html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { 
  font-family: var(--font-display); 
  font-weight: var(--fw-extrabold); 
  line-height: var(--lh-tight); 
  color: var(--gray-900); 
  letter-spacing: -0.025em; 
}
h1 { font-size: var(--text-4xl); margin-bottom: var(--sp-4); letter-spacing: -0.035em; }
h2 { font-size: var(--text-3xl); margin-bottom: var(--sp-3); letter-spacing: -0.025em; }
h3 { font-size: var(--text-2xl); margin-bottom: var(--sp-2); letter-spacing: -0.02em; }
h4 { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p { line-height: var(--lh-relaxed); color: var(--gray-600); }
a { color: var(--primary-600); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--primary-700); }

strong { font-weight: var(--fw-bold); color: var(--gray-900); }
em { font-style: italic; }
small { font-size: var(--text-sm); }

.gradient-text {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #2563EB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}


/* ── Layout Utilities ────────────────────────────────────────── */
.container   { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--sp-6); }
.container-lg{ max-width: 1400px; margin: 0 auto; padding: 0 var(--sp-6); }
.full-height { min-height: 100vh; }

/* ── Flex Utilities ──────────────────────────────────────────── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-gap-2  { gap: var(--sp-2); }
.flex-gap-3  { gap: var(--sp-3); }
.flex-gap-4  { gap: var(--sp-4); }
.flex-1      { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center{ align-items: center; }
.items-start { align-items: flex-start; }
.items-end   { align-items: flex-end; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-end      { justify-content: flex-end; }

/* ── Grid Utilities ──────────────────────────────────────────── */
.grid   { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }

/* ── Spacing Utilities ───────────────────────────────────────── */
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }
.mt-2  { margin-top: var(--sp-2); }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mb-2  { margin-bottom: var(--sp-2); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.p-4   { padding: var(--sp-4); }
.p-6   { padding: var(--sp-6); }
.px-4  { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.py-2  { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }

/* ── Text Utilities ──────────────────────────────────────────── */
.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }
.text-center{ text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.text-subtle{ color: var(--color-text-subtle); }
.text-primary{ color: var(--primary-600); }
.text-success{ color: var(--success-600); }
.text-danger { color: var(--danger-600); }
.text-warning{ color: var(--warning-600); }
.font-medium { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold   { font-weight: var(--fw-bold); }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Visibility ──────────────────────────────────────────────── */
.hidden      { display: none !important; }
.sr-only     { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── App Shell ───────────────────────────────────────────────── */
#app         { display: flex; min-height: 100vh; }
.sidebar     { width: var(--sidebar-width); flex-shrink: 0; background: var(--sidebar-bg); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; transition: width var(--transition-slow); overflow: hidden; }
.main-area   { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; background: var(--color-bg-secondary); }
.topbar      { height: var(--header-height); background: #fff; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; padding: 0 var(--sp-6); gap: var(--sp-4); position: sticky; top: 0; z-index: 50; }
.page-content{ flex: 1; padding: var(--sp-8) var(--sp-6); }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--gray-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ── Selection ───────────────────────────────────────────────── */
::selection { background: var(--primary-200); color: var(--primary-900); }

/* ── Focus ───────────────────────────────────────────────────── */
*:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ── Divider ─────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--color-border); margin: var(--sp-4) 0; }
.divider-v { border: none; border-left: 1px solid var(--color-border); height: 100%; }

/* ── Images ──────────────────────────────────────────────────── */
img, svg { display: block; max-width: 100%; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar   { width: var(--sidebar-collapsed); }
  .main-area { margin-left: var(--sidebar-collapsed); }
  .sidebar .nav-label, .sidebar .sidebar-title, .sidebar .user-info { display: none; }
  .grid-4    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sidebar   { transform: translateX(-100%); }
  .main-area { margin-left: 0; }
  .sidebar.mobile-open { transform: translateX(0); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .page-content { padding: var(--sp-4); }
}