/*
 * Vagno França — foundations and shared controls.
 * Research: alexpate/awesome-design-systems; Carbon spacing and 2x Grid.
 * Adaptation for this static website; no Carbon runtime or brand stylesheet.
 */
:root {
  --ink: #101210;
  --brown: #191e19;
  --muted: #c3c1b6;
  --line: #596052;
  --sand: #151a16;
  --paper: #eeeae0;
  --accent: #cdbb95;
  --accent-hover: #dfcfad;

  --space-01: 2px;
  --space-02: 4px;
  --space-03: 8px;
  --space-04: 12px;
  --space-05: 16px;
  --space-06: 24px;
  --space-07: 32px;
  --space-08: 40px;
  --space-09: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  --font-body: Switzer, 'Segoe UI', sans-serif;
  --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --text-meta: 13px;
  --text-control: 14px;
  --text-body: 17px;
  --radius: 2px;
  --radius-pill: 0px;
  --radius-circle: 0px;
  --control-size: 44px;
  --button-size: 56px;
  --focus: var(--ink);
  --focus-width: 3px;
  --focus-offset: 5px;
  --duration-press: 140ms;
  --duration-control: 180ms;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --edge: 6vw;
  --section-space: var(--space-12);
  --gallery-gap: var(--space-06);
  --photo-ratio: 4 / 3;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-07);
  min-height: var(--button-size);
  padding: var(--space-05) var(--space-06);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--ink);
  font-size: var(--text-control);
  font-weight: 500;
  transition: background-color var(--duration-control) ease, transform var(--duration-press) var(--ease);
}
.button:hover { background: var(--accent-hover); }
.button-small { min-height: var(--space-09); padding: var(--space-04) var(--space-06); gap: var(--space-06); }
.button-light { background: var(--paper); }
.button-light:hover { background: var(--sand); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: var(--brown); }
.icon-button {
  width: var(--control-size);
  height: var(--control-size);
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-circle);
  transition: background-color var(--duration-control) ease, transform var(--duration-press) var(--ease);
}
.icon-button:hover:not(:disabled) { background: var(--accent); }
.round-icon {
  display: grid;
  place-items: center;
  width: var(--control-size);
  height: var(--control-size);
  flex-shrink: 0;
  border-radius: var(--radius-circle);
  background: var(--accent);
  color: var(--ink);
}

@media (max-width: 1100px) { :root { --section-space: var(--space-11); } }
@media (max-width: 700px) {
  :root { --section-space: var(--space-10); --gallery-gap: var(--space-05); --text-body: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .icon-button { transition: none; }
}