@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ══════════════════════════════════════════════════════════════
   ONE INSIDER v1 — Design System
   root.css — tokens, reset, typography, layout
══════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette ── */
  --bg:        #08080a;
  --bg-2:      #0f0f13;
  --bg-3:      #16161c;
  --surface:   #1c1c24;
  --surface-2: #23232e;
  --surface-3: #2a2a38;
  --border:    rgba(255,255,255,0.06);
  --border-2:  rgba(255,255,255,0.11);
  --border-3:  rgba(255,255,255,0.18);

  /* ── Accent — amber gold ── */
  --accent:      #f5c842;
  --accent-dim:  #c49a1a;
  --accent-bright: #ffd84d;
  --accent-glow: rgba(245,200,66,0.12);
  --accent-glow2: rgba(245,200,66,0.22);

  /* ── Text ── */
  --text:      #ededea;
  --text-2:    #9a9994;
  --text-3:    #55555e;
  --text-4:    #3a3a42;

  /* ── Semantic ── */
  --danger:    #e05252;
  --danger-glow: rgba(224,82,82,0.15);
  --success:   #52b788;
  --success-glow: rgba(82,183,136,0.15);
  --info:      #6ba3e0;
  --info-glow: rgba(107,163,224,0.15);
  --warning:   #f0a050;

  /* ── Type ── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Spacing ── */
  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px; --s8: 64px;
  --s9: 96px;

  /* ── Radius ── */
  --r1: 4px; --r2: 8px; --r3: 14px; --r4: 20px;
  --r5: 9999px; --r6: 28px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.65);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.75);

  /* ── Glows ── */
  --glow-accent:   0 0 32px rgba(245,200,66,0.14);
  --glow-accent-lg: 0 0 60px rgba(245,200,66,0.18);
  --glow-success:  0 0 24px rgba(82,183,136,0.15);
  --glow-danger:   0 0 24px rgba(224,82,82,0.15);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle background texture */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(245,200,66,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 100% 100%, rgba(107,163,224,0.03) 0%, transparent 50%);
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ── Selection ─────────────────────────────────────────────── */
::selection { background: var(--accent); color: #000; }

/* ── Base elements ─────────────────────────────────────────── */
a   { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ── Typography scale ──────────────────────────────────────── */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 800; line-height: 1.02;
  letter-spacing: -0.03em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.025em;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700; line-height: 1.2;
}
.display-sm {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 600;
}
.label {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3);
}
.body-lg  { font-size: 1.05rem; font-weight: 300; line-height: 1.75; }
.body-sm  { font-size: 0.84rem; color: var(--text-2); line-height: 1.55; }
.body-xs  { font-size: 0.74rem; color: var(--text-3); }
.mono     { font-family: 'Courier New', monospace; font-size: 0.85rem; }

/* ── Layout utilities ──────────────────────────────────────── */
.container         { max-width: 1200px; margin: 0 auto; padding: 0 var(--s5); position: relative; z-index: 1; }
.container--narrow { max-width: 780px;  margin: 0 auto; padding: 0 var(--s5); position: relative; z-index: 1; }
.flex              { display: flex; }
.flex-col          { display: flex; flex-direction: column; }
.items-center      { align-items: center; }
.justify-between   { justify-content: space-between; }
.gap-1 { gap: var(--s1); } .gap-2 { gap: var(--s2); } .gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); } .gap-5 { gap: var(--s5); } .gap-6 { gap: var(--s6); }
.grid { display: grid; }

/* ── Color utilities ───────────────────────────────────────── */
.accent  { color: var(--accent); }
.muted   { color: var(--text-2); }
.dimmed  { color: var(--text-3); }
.success { color: var(--success); }
.danger  { color: var(--danger); }

/* ── Divider ───────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border); width: 100%; }

/* ── Noise texture util ────────────────────────────────────── */
.noise::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.3; pointer-events: none; border-radius: inherit; z-index: 0;
}