/* Custom styles & utilities for personal portfolio */

:root {
  --bg-color: #0f172a;
  --surface-color: #1e293b;
  --surface-border: #334155;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --tag-bg: rgba(148, 163, 184, 0.12);
  --tag-border: rgba(148, 163, 184, 0.2);
  --input-bg: rgba(15, 23, 42, 0.65);
  --header-bg: rgba(15, 23, 42, 0.85);
  --accent: #38bdf8;
  --accent-hover: #0ea5e9;
  --accent-glow: rgba(56, 189, 248, 0.18);
}

html[data-theme="light"],
[data-theme="light"] {
  --bg-color: #f8fafc;
  --surface-color: #ffffff;
  --surface-border: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #475569;
  --tag-bg: #f1f5f9;
  --tag-border: #cbd5e1;
  --input-bg: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.9);
  --accent: #0284c7;
  --accent-hover: #0369a1;
  --accent-glow: rgba(2, 132, 199, 0.14);
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  transition: background-color 0.2s ease, color 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Gothic Font Family for branding */
.font-gothic {
  font-family: 'League Spartan', 'Franklin Gothic Medium', 'ITC Franklin Gothic', 'Century Gothic', -apple-system, sans-serif;
}

/* Header */
.site-header {
  background-color: var(--header-bg);
  border-color: var(--surface-border);
}

/* Headings and primary text */
.heading-text {
  color: var(--text-main);
}

.body-muted {
  color: var(--text-muted);
}

/* Card hover & appearance */
.project-card {
  background-color: var(--surface-color);
  border: 1px solid var(--surface-border);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease;
}

.project-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 25px -5px var(--accent-glow);
}

/* Filter buttons */
.filter-btn {
  background-color: var(--surface-color);
  border-color: var(--surface-border);
  color: var(--text-muted);
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--text-main);
}

.filter-btn.active {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}

/* Search input */
.search-field {
  background-color: var(--input-bg);
  border-color: var(--surface-border);
  color: var(--text-main);
}

.search-field:focus {
  border-color: var(--accent);
  outline: none;
}

.search-field::placeholder {
  color: var(--text-muted);
}

/* Tag Pill */
.tag-pill {
  background-color: var(--tag-bg);
  border: 1px solid var(--tag-border);
  color: var(--text-muted);
}

/* Theme toggle button & nav cards */
.ui-box {
  background-color: var(--surface-color);
  border-color: var(--surface-border);
}

.border-theme {
  border-color: var(--surface-border);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

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