/* =====================================================
   GW2 Guide — base.css
   Reset · CSS Variables · Typography · Utilities
   ===================================================== */

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

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

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

/* ── Design Tokens ── */
:root {
  /* Brand */
  --color-brand:        #c07a1a;
  --color-brand-dark:   #9a5e0e;
  --color-brand-light:  #fff3e0;
  --color-brand-mid:    #f5a623;

  /* Surface */
  --color-bg:           #f5f3ef;
  --color-surface:      #ffffff;
  --color-surface-alt:  #f0ede8;
  --color-border:       #e4ddd3;
  --color-border-strong:#c8bfb0;

  /* Text */
  --color-text:         #1c1710;
  --color-text-2:       #46392a;
  --color-text-muted:   #7a6a58;
  --color-text-faint:   #b0a090;

  /* Expansion palette */
  --color-hot:   #1e8c50;
  --color-pof:   #c45c0a;
  --color-eod:   #b83030;
  --color-soto:  #6e38c0;
  --color-jw:    #1e68c2;
  --color-voe:   #0a9e7a;
  --color-core:  #5a6070;

  /* Feedback */
  --color-tip-bg:    #f0fdf4;
  --color-tip-border:#86efac;
  --color-tip-text:  #14532d;
  --color-note-bg:   #fefce8;
  --color-note-border:#fde047;
  --color-note-text: #713f12;

  /* Spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 4px rgba(40,20,0,0.08);
  --shadow-md: 0 3px 12px rgba(40,20,0,0.10);
  --shadow-lg: 0 8px 28px rgba(40,20,0,0.13);

  /* Typography */
  --font-display: 'Cinzel', 'Georgia', serif;
  --font-body:    'Nanum Gothic', 'Malgun Gothic', sans-serif;
  --font-mono:    'Consolas', 'Courier New', monospace;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 64px;
}

/* ── Base Typography ── */
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  font-weight: 800;
  color: var(--color-text);
}

h1 { font-size: clamp(24px, 4vw, 40px); }
h2 { font-size: clamp(18px, 2.5vw, 24px); }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

p { color: var(--color-text-2); line-height: 1.8; }

/* ── Utility Classes ── */

/* Display */
.d-flex   { display: flex; }
.d-grid   { display: grid; }
.d-block  { display: block; }
.d-none   { display: none; }

/* Flex */
.flex-wrap    { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Gap */
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }

/* Margin bottom */
.mb-2  { margin-bottom: var(--sp-2); }
.mb-3  { margin-bottom: var(--sp-3); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-5  { margin-bottom: var(--sp-5); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }

/* Text */
.text-center  { text-align: center; }
.text-muted   { color: var(--color-text-muted); }
.text-faint   { color: var(--color-text-faint); }
.text-brand   { color: var(--color-brand); }
.text-sm      { font-size: 13px; }
.text-xs      { font-size: 11px; }
.text-lg      { font-size: 17px; }
.font-bold    { font-weight: 700; }
.font-black   { font-weight: 800; }
.font-display { font-family: var(--font-display); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--color-surface-alt); }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--r-full);
}

/* ── Selection ── */
::selection {
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
}

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

/* ── Print ── */
@media print {
  header, footer, nav { display: none; }
  body { background: #fff; color: #000; }
}