/* ===== CSS VARIABLES ===== */
:root {
  /* Core palette */
  --iron: #0a0a0c;
  --iron2: #111114;
  --iron3: #1a1a1e;
  --iron4: #222228;
  --iron5: #2d2d35;
  --steel: #3c3c46;
  --silver: #c8cdd4;
  --silver2: #8c9099;
  --silver3: #b3b3b4;
  --gold: #c9a227;
  --gold2: #e8be45;
  --gold3: #f5d06a;
  --red-accent: #c0392b;
  --green-accent: #2ecc71;

  /* Theme tokens */
  --bg: var(--iron);
  --bg2: var(--iron2);
  --bg3: var(--iron3);
  --surface: rgba(34, 34, 40, 0.7);
  --surface2: rgba(45, 45, 53, 0.6);
  --border: rgba(200, 205, 212, 0.08);
  --border-gold: rgba(201, 162, 39, 0.3);
  --border-strong: rgba(200, 205, 212, 0.15);
  --text: var(--silver);
  --text2: var(--silver2);
  --text3: var(--silver3);
  --accent: var(--gold);
  --accent2: var(--gold2);
  --nav-bg: rgba(10, 10, 12, 0.88);
  --card-bg: rgba(26, 26, 30, 0.8);
  --card-hover: rgba(34, 34, 40, 0.95);
  --footer-bg: #060608;
  --footer-text: rgba(200, 205, 212, 0.55);
  --footer-text-muted: rgba(200, 205, 212, 0.38);
  --footer-text-dim: rgba(200, 205, 212, 0.22);
  --footer-border: rgba(200, 205, 212, 0.08);
}

[data-theme="light"] {
  --bg: #f2f0ec;
  --bg2: #e8e6e1;
  --bg3: #dedad4;
  --surface: rgba(242, 240, 236, 0.8);
  --surface2: rgba(232, 230, 225, 0.7);
  --border: rgba(30, 30, 35, 0.1);
  --border-gold: rgba(150, 110, 20, 0.25);
  --border-strong: rgba(30, 30, 35, 0.18);
  --text: #1a1a1e;
  --text2: #444450;
  --text3: #888890;
  --accent: #9a7010;
  --accent2: #c49020;
  --nav-bg: rgba(242, 240, 236, 0.9);
  --card-bg: rgba(242, 240, 236, 0.9);
  --card-hover: rgba(232, 230, 225, 1);
  --footer-bg: #dedad4;
  --footer-text: rgba(26, 24, 20, 0.75);
  --footer-text-muted: rgba(26, 24, 20, 0.55);
  --footer-text-dim: rgba(26, 24, 20, 0.4);
  --footer-border: rgba(26, 24, 20, 0.12);


  --header-links-color: #494949;
}

/* ===== RESET ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  font-family: "Rajdhani", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition:
    background 0.4s,
    color 0.4s;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}
ul {
  list-style: none;
}

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: var(--iron);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold), var(--gold2));
  border-radius: 2px;
}

/* ===== GRID OVERLAY EFFECT ===== */
.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(201, 162, 39, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 162, 39, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}