/* ============================================================
   base.css — shared foundation for every stefanguy.com page.

   Contains design tokens, the reset, layout primitives, and the
   handful of components that appear on more than one page (top
   bar, theme toggle, form fields, primary button, contact-email
   button). Anything specific to a single page stays inline in
   that page's own <style> block.

   Linked as /styles/base.css so it resolves from any depth
   (/, /downloads, /products/<slug>, …).
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  font-family: InterVariable, Inter, sans-serif;
  font-optical-sizing: auto;
  font-feature-settings: "liga" 1, "calt" 1;
  --color-text-primary: #1c1917;
  --color-text-secondary: #78716c;
  --color-text-tertiary: #a8a29e;
  --color-text-muted: #57534e;
  --color-text-faint: #d6d3d1;
  --color-bg-page: #fafaf9;
  --color-bg-surface: #ffffff;
  --color-bg-input: #f5f5f4;
  --color-bg-chrome: #f6f6f6;
  --color-border: #e7e5e4;
  --color-border-subtle: rgba(0,0,0,0.06);
  --color-border-faint: rgba(0,0,0,0.05);
  --color-cta-bg: #1c1917;
  --color-cta-text: #ffffff;
  --color-cta-hover: #292524;
  --color-error: #dc2626;
}
:root[data-theme=dark] {
  color-scheme: dark;
  --color-text-primary: #e7e5e4;
  --color-text-secondary: #a8a29e;
  --color-text-tertiary: #78716c;
  --color-text-muted: #a8a29e;
  --color-text-faint: #57534e;
  --color-bg-page: #0c0a09;
  --color-bg-surface: #1c1917;
  --color-bg-input: #292524;
  --color-bg-chrome: #292524;
  --color-border: #44403c;
  --color-border-subtle: rgba(255,255,255,0.08);
  --color-border-faint: rgba(255,255,255,0.06);
  --color-cta-bg: #e7e5e4;
  --color-cta-text: #1c1917;
  --color-cta-hover: #d6d3d1;
  --color-error: #f87171;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; background: var(--color-bg-surface); }
:root[data-theme=dark] { background: #100d0a; }
body { margin: 0; background: var(--color-bg-page); color: var(--color-text-primary); letter-spacing: -0.045px; }
p { text-wrap: pretty; margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── LAYOUT ── */
.layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-bg-surface);
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px 80px;
  min-width: 0;
}
.inner {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
}

/* ── DIVIDER / SECTION ── */
.divider {
  height: 1px;
  background: var(--color-border-faint);
  margin: 48px 0 0;
}
.section {
  padding-top: 48px;
}
.section-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0 0 20px;
}

/* ── AVATAR ── */
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 10%;
  background: var(--color-bg-input);
  display: block;
  border: 1.5px solid var(--color-border-subtle);
}

/* ── TOP BAR + THEME TOGGLE ── */
.topbar {
  position: fixed;
  top: 0; right: 0;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 100;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.theme-toggle {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--color-bg-input);
  color: var(--color-text-secondary);
  cursor: pointer;
  position: relative;
  transition: color 0.15s ease;
}
.theme-toggle:hover { color: var(--color-text-primary); }
.theme-icon {
  position: absolute;
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.theme-icon.active { opacity: 1; transform: rotate(0deg) scale(1); }

/* ── FORM FIELDS ── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.form-field input,
.form-field textarea,
.form-field select {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  resize: vertical;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-text-tertiary); }
.form-field input:focus,
.form-field textarea:focus { border-color: var(--color-text-muted); }
.form-field textarea { min-height: 100px; }
.form-submit {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border: none;
  border-radius: 61px;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  align-self: flex-start;
  margin-top: 4px;
}
.form-submit:hover { background: var(--color-cta-hover); }
.form-submit:active { transform: scale(0.97); }
.form-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── CONTACT-EMAIL BUTTON ── */
.contact-email-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-left: -12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.contact-email-btn:hover { color: var(--color-text-primary); background: var(--color-bg-input); }
.contact-email-text::after { content: "stefan" "@" "stefanguy.com"; }
.contact-email-btn .icon-copy { color: var(--color-text-tertiary); flex-shrink: 0; }
.contact-email-btn .icon-copied { display: none; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); }
.contact-email-btn.copied .icon-copy { display: none; }
.contact-email-btn.copied .icon-copied { display: inline; }

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  .topbar { padding: 12px 16px; }
  .content { padding: 0 16px 48px; }
}