/* UI overrides: orange/red accents and sharper corners */

:root {
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

/* Dark theme palette */
:root[data-theme="dark"] {
  --bg: #0e0f11;
  --surface: #15161a;
  --elev: #1b1c21;
  --text: #f2f2f3;
  --muted: #a0a1a6;
  --border: #2a2c33;

  --accent: #ff6a00;       /* vivid orange */
  --accent-2: #ff2d20;     /* punchy red */
  --accent-contrast: #0b0c0f;
}

/* Light theme palette */
:root[data-theme="light"] {
  --bg: #fafafa;
  --surface: #ffffff;
  --elev: #f5f6f7;
  --text: #16181d;
  --muted: #5f6673;
  --border: #e6e8ec;

  --accent: #e4570e;       /* warm orange */
  --accent-2: #d7263d;     /* deep red */
  --accent-contrast: #ffffff;
}

/* Use accent color for native controls (checkbox, radio, range, etc.) */
:root[data-theme="dark"],
:root[data-theme="light"] {
  accent-color: var(--accent);
}

/* Base surfaces and text */
body {
  background: var(--bg);
  color: var(--text);
}

/* Cards and layout containers */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.site-header,
.site-footer {
  background: transparent;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

/* Links & accent usage */
a {
  color: var(--accent);
  text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
}
a:hover {
  color: var(--accent-2);
  text-decoration-color: var(--accent-2);
}
a:visited {
  color: var(--accent);
}

/* Brand dot accent */
.brand .dot {
  color: var(--accent);
}

/* Buttons */
.btn {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--accent-contrast);
  border: none;
}
.btn.primary:hover {
  filter: brightness(1.05);
}
.btn.primary:active {
  filter: brightness(0.98);
}

.btn.ghost {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn.ghost:hover {
  /* fallback */
  background: rgba(255, 106, 0, 0.08);
  /* derived from current accent when supported */
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Inputs */
input,
textarea,
select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Accented titles */
.card .card-title {
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: 8px;
}

/* Focus states */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Navigation states */
.site-nav a[aria-current="page"] {
  color: var(--accent);
}
.site-nav a:hover {
  color: var(--accent-2);
}

/* Text selection highlight */
::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent-contrast);
}
::-moz-selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent-contrast);
}

/* Theme toggle styling */
.theme-toggle .icon {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* ===== Gallery (About page) ===== */
.gallery-section { 
  margin-top: 24px; 
}

.gallery-section .gallery-header {
  margin-bottom: 8px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.gallery figure {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0;
}

.gallery img {
  width: 100%;
  height: 160px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.gallery figure:hover img {
  transform: scale(1.03);
}

.gallery figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}