/* ==========================================================================
   HADIOSH Studio — Brand Design Tokens v2 (Dark + Light Mode)
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ═══ Dark Mode (پیش‌فرض) ═══ */
:root,
.theme-dark {
  --hd-black: #0D0D0D;
  --hd-dark-gray: #171717;
  --hd-graphite: #232323;
  --hd-gold: #D4AF37;
  --hd-gold-hover: #E5C85B;
  --hd-success: #22C55E;
  --hd-error: #EF4444;
  --hd-warning: #F59E0B;
  --hd-info: #3B82F6;
  --hd-text-primary: #FFFFFF;
  --hd-text-secondary: rgba(255, 255, 255, .65);
  --hd-text-muted: rgba(255, 255, 255, .40);
  --hd-bg-body: #0D0D0D;
  --hd-bg-card: #171717;
  --hd-bg-elevated: #232323;
  --hd-font-heading: "Space Grotesk", sans-serif;
  --hd-font-body: "Inter", sans-serif;
  --hd-font-mono: "JetBrains Mono", monospace;
  --hd-radius-sm: 10px;
  --hd-radius-md: 16px;
  --hd-radius-lg: 24px;
  --hd-radius-card: 20px;
  --hd-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  --hd-border-color: rgba(255, 255, 255, .06);
  --hd-border-card-color: rgba(255, 255, 255, .05);
  --hd-border: 1px solid var(--hd-border-color);
  --hd-border-card: 1px solid var(--hd-border-card-color);
  --hd-space-1: 8px;
  --hd-space-2: 16px;
  --hd-space-3: 24px;
  --hd-space-4: 32px;
  --hd-space-5: 48px;
  --hd-space-6: 64px;
  --hd-space-7: 96px;
  --hd-transition: 250ms ease;
  --hd-scale-hover: 1.02;
}

/* ═══ Light Mode ═══ */
.theme-light {
  --hd-black: #F7F8F9;
  --hd-dark-gray: #FFFFFF;
  --hd-graphite: #F1F3F5;
  --hd-text-primary: #1A1A1A;
  --hd-text-secondary: rgba(26, 26, 26, .65);
  --hd-text-muted: rgba(26, 26, 26, .40);
  --hd-bg-body: #F7F8F9;
  --hd-bg-card: #FFFFFF;
  --hd-bg-elevated: #F1F3F5;
  --hd-border-color: rgba(0, 0, 0, .08);
  --hd-border-card-color: rgba(0, 0, 0, .05);
  --hd-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}

/* ═══ Base ═══ */
body {
  background: var(--hd-bg-body);
  color: var(--hd-text-primary);
  font-family: var(--hd-font-body);
  transition: background var(--hd-transition), color var(--hd-transition);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hd-font-heading);
  font-weight: 700;
}

/* ═══ Theme Toggle Button ═══ */
.hd-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--hd-radius-sm);
  border: 1px solid rgba(255, 255, 255, .1);
  background: transparent;
  color: var(--hd-text-primary);
  cursor: pointer;
  transition: border-color var(--hd-transition), color var(--hd-transition), background var(--hd-transition);
}
.theme-light .hd-theme-toggle {
  border: 1px solid rgba(0, 0, 0, .1);
}
.hd-theme-toggle:hover { border-color: var(--hd-gold); color: var(--hd-gold); }
.hd-theme-toggle__icon-sun,
.hd-theme-toggle__icon-moon { width: 20px; height: 20px; }
.theme-light .hd-theme-toggle__icon-moon { display: none; }
.theme-dark .hd-theme-toggle__icon-sun { display: none; }

/* ═══ Buttons ═══ */
.hd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hd-font-body);
  border-radius: var(--hd-radius-sm);
  padding: var(--hd-space-1) var(--hd-space-3);
  transition: background-color var(--hd-transition),
              border-color var(--hd-transition),
              color var(--hd-transition),
              transform var(--hd-transition);
  cursor: pointer;
  text-decoration: none;
}
.hd-btn:hover { transform: scale(var(--hd-scale-hover)); }
.hd-btn--primary {
  background: var(--hd-gold);
  color: var(--hd-black);
  border: 1px solid transparent;
  font-weight: 700;
}
.theme-light .hd-btn--primary { color: #0D0D0D; }
.hd-btn--primary:hover { background: var(--hd-gold-hover); }
.hd-btn--secondary {
  background: transparent;
  color: var(--hd-text-primary);
  border: 1px solid var(--hd-border-color);
}
.hd-btn--secondary:hover { background: var(--hd-graphite); }
.hd-btn--ghost {
  background: transparent;
  color: var(--hd-text-primary);
  border: none;
}
.hd-btn--ghost:hover { background: var(--hd-graphite); }

/* ═══ Cards ═══ */
.hd-card {
  background: var(--hd-bg-card);
  border-radius: var(--hd-radius-card);
  border: var(--hd-border-card);
  box-shadow: var(--hd-shadow);
  transition: border-color var(--hd-transition), background var(--hd-transition);
}
.hd-card:hover { border-color: var(--hd-gold); }

.hd-mono { font-family: var(--hd-font-mono); }