/* ── Idre design tokens ───────────────────────────── */
:root {
  /* surfaces */
  --bg: #080a0f;
  --bg-2: #0b0e15;
  --panel: #0f131d;
  --surface: #141926;
  --surface-2: #1a2030;
  --line: rgba(176, 190, 222, 0.10);
  --line-strong: rgba(176, 190, 222, 0.18);

  /* glass */
  --glass: linear-gradient(155deg, rgba(180,198,232,0.07), rgba(180,198,232,0.018));
  --glass-line: rgba(198, 212, 240, 0.14);
  --glass-hi: inset 0 1px 0 rgba(220, 232, 255, 0.10);

  /* iridescent / pearlescent sheen */
  --irid: linear-gradient(115deg, #b9c8e8 0%, #cabce6 22%, #bce6df 46%, #e7d6c6 68%, #c2d0f0 86%, #d6c6e8 100%);
  --irid-soft: linear-gradient(115deg, rgba(185,200,232,.5), rgba(202,188,230,.5), rgba(188,230,223,.5), rgba(231,214,198,.5), rgba(194,208,240,.5));

  /* text */
  --text: #e9ecf5;
  --text-2: #aab1c7;
  --muted: #767e96;

  /* accent system (tweakable) */
  --acc: #4da6ff;
  --acc-2: #9ed1ff;
  --acc-soft: rgba(77, 166, 255, 0.12);
  --acc-line: rgba(77, 166, 255, 0.38);
  --glow: 0 0 36px rgba(77, 166, 255, 0.22);

  /* silver brand */
  --silver-hi: #f2f5fa;
  --silver-mid: #c0c9d8;
  --silver-lo: #8b95a9;
  --holo: linear-gradient(115deg, #c7d0de, #9ed1ff 28%, #e9d6f2 52%, #9ed1ff 74%, #c7d0de);

  /* status */
  --ok: #3ddfa0;
  --warn: #ffb454;
  --danger: #ff6b7a;

  /* type */
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* shape */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* metallic ambient sheen behind glass */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 8%, rgba(120,150,210,0.10), transparent 70%),
    radial-gradient(36% 46% at 88% 22%, rgba(180,150,210,0.07), transparent 70%),
    radial-gradient(50% 50% at 70% 100%, rgba(120,200,200,0.06), transparent 70%);
}

/* iridescent text helper */
.irid-text {
  background: var(--irid); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(150, 195, 255, 0.22));
}

::selection { background: var(--acc); color: #fff; }

a { color: inherit; text-decoration: none; }

/* mono micro-label */
.k-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc-2);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--acc);
  color: #fff;
  box-shadow: 0 0 18px color-mix(in srgb, var(--acc) 30%, transparent);
}
.btn-primary:hover { filter: brightness(1.12); box-shadow: 0 0 26px color-mix(in srgb, var(--acc) 45%, transparent); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--acc-line); background: var(--acc-soft); }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(168, 178, 218, 0.14); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }