/* ═══════════════════════════════════════════════════════════
   base.css — Design tokens, reset, typography
═══════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Brand palette */
  --ink:           #0D1B2A;
  --ink-mid:       #1C3049;
  --ink-soft:      #2E4A68;
  --slate:         #5A7089;
  --muted:         #8FA3B8;
  --rule:          #D8E3ED;
  --surface:       #F2F6FA;
  --white:         #FFFFFF;

  /* Accent */
  --gold:          #B8892A;
  --gold-light:    #D4A84B;
  --gold-pale:     #FBF5E8;

  /* Semantic */
  --green:         #1A6644;
  --green-bg:      #EAF5EE;
  --amber:         #8A4F00;
  --amber-bg:      #FFF4E2;
  --red:           #8B1A1A;
  --red-bg:        #FDF0F0;
  --blue:          #0F3D6B;
  --blue-bg:       #EBF3FA;

  /* Layout */
  --sidebar-w:     230px;
  --topbar-h:      58px;
  --radius:        6px;
  --radius-lg:     10px;
  --radius-xl:     14px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(13,27,42,0.07), 0 0 0 1px rgba(13,27,42,0.05);
  --shadow-md:  0 4px 16px rgba(13,27,42,0.10), 0 0 0 1px rgba(13,27,42,0.06);
  --shadow-lg:  0 8px 32px rgba(13,27,42,0.14), 0 0 0 1px rgba(13,27,42,0.07);

  /* Transitions */
  --ease:       0.15s ease;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }

/* ─── TYPOGRAPHY ─────────────────────────────────────────── */
.font-display {
  font-family: 'Playfair Display', serif;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  line-height: 1.2;
  color: var(--ink);
}

h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }

.text-muted    { color: var(--muted); }
.text-slate    { color: var(--slate); }
.text-gold     { color: var(--gold); }
.text-sm       { font-size: 12px; }
.text-xs       { font-size: 11px; }
.fw-600        { font-weight: 600; }
.fw-700        { font-weight: 700; }

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ─── UTILITY ────────────────────────────────────────────── */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.gap-4        { gap: 4px; }
.gap-6        { gap: 6px; }
.gap-8        { gap: 8px; }
.gap-10       { gap: 10px; }
.gap-12       { gap: 12px; }
.gap-14       { gap: 14px; }
.gap-16       { gap: 16px; }
.gap-20       { gap: 20px; }
.ml-auto      { margin-left: auto; }
.mt-4         { margin-top: 4px; }
.mt-6         { margin-top: 6px; }
.mt-8         { margin-top: 8px; }
.mb-8         { margin-bottom: 8px; }
.mb-12        { margin-bottom: 12px; }
.mb-16        { margin-bottom: 16px; }
.mb-20        { margin-bottom: 20px; }
.w-full       { width: 100%; }
.truncate     { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden       { display: none !important; }