/* ================================================================
   wXRP Network — base design tokens + reset + typography
   ================================================================ */

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

/* HTML5 [hidden] must always win over component display rules. */
[hidden] { display: none !important; }

:root {
  /* Colors */
  --navy:     #0b1e3d;
  --navy-2:   #13264a;
  --primary:  #1e5bff;
  --cyan:     #22d3ee;
  --bg:       #f5f5f7;
  --surface:  #ffffff;
  --surface-2:#f1f5ff;
  --text:     #0f172a;
  --muted:    #64748b;
  --border:   #e2e8f0;
  --success:  #16a34a;
  --warning:  #d97706;
  --danger:   #dc2626;
  --banner:   #e7efff;

  /* Gradient */
  --grad-cta: linear-gradient(90deg, #1e5bff 0%, #22d3ee 100%);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(15,23,42,0.04);
  --sh-2: 0 4px 12px rgba(15,23,42,0.06);
  --sh-3: 0 10px 30px rgba(15,23,42,0.10);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Layout */
  --container: 1200px;
  --nav-h:     72px;
}

body {
  font-family: var(--font-sans);
  font-size:   var(--fs-md);
  line-height: 1.55;
  color:       var(--text);
  background:  var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0 0 var(--s-4); color: var(--navy); font-weight: 700; line-height: 1.2; }
h1 { font-size: var(--fs-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p  { margin: 0 0 var(--s-4); color: var(--text); }
a  { color: var(--primary); text-decoration: none; transition: color .15s; }
a:hover { color: var(--navy); }

ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }

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

hr { border: 0; height: 1px; background: var(--border); margin: var(--s-7) 0; }

.muted { color: var(--muted); }
.center { text-align: center; }
.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;
}