/* ── Design tokens ──────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg:             #f4f7f2;
  --surface:        #fff;
  --surface-alt:    #f7faf5;
  --surface-sunken: #fafcf8;

  /* Borders */
  --border:         #ecefe9;
  --border-strong:  #dbe1d6;
  --border-subtle:  #f3f6ef;

  /* Text */
  --text:           #1a1f1b;
  --text-muted:     #556059;
  --text-subtle:    #8e998f;

  /* Brand + accents */
  --brand:          #4A7A5C;   /* moss */
  --brand-hover:    #3F6A4F;
  --brand-soft:     #EEF4F0;
  --accent:         #E8A33D;   /* amber */
  --accent-hover:   #D08F2B;
  --accent-soft:    #FBF1E0;
  --focus-ring:     #E8A33D;

  /* Semantic */
  --danger:         #C0523A;
  --danger-hover:   #A4442E;
  --danger-soft:    #FBEEEA;
  --success:        #4A7A5C;
  --warning:        #E8A33D;

  /* Fixed chrome */
  --header-bg:      #4A7A5C;
  --header-text:    #fff;

  /* Effects */
  --shadow-sm:      0 1px 4px rgba(20, 40, 30, 0.08);
  --shadow-md:      0 4px 16px rgba(20, 40, 30, 0.12);

  /* Typography */
  --font-sans: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:             #101612;
    --surface:        #18211b;
    --surface-alt:    #1f2a22;
    --surface-sunken: #141c17;

    --border:         #263328;
    --border-strong:  #314033;
    --border-subtle:  #1f2a22;

    --text:           #e4ebe5;
    --text-muted:     #9aa79c;
    --text-subtle:    #6f7c72;

    --brand:          #8BC9A0;
    --brand-hover:    #A3D6B4;
    --brand-soft:     rgba(139, 201, 160, 0.14);
    --accent:         #E8B864;
    --accent-hover:   #F0C980;
    --accent-soft:    rgba(232, 184, 100, 0.16);
    --focus-ring:     #E8B864;

    --danger:         #E0765A;
    --danger-hover:   #EC8F77;
    --danger-soft:    rgba(224, 118, 90, 0.16);
    --success:        #8BC9A0;
    --warning:        #E8B864;

    --shadow-sm:      0 1px 4px rgba(0, 0, 0, 0.4);
    --shadow-md:      0 4px 16px rgba(0, 0, 0, 0.5);
  }
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Shared spinner keyframe used by photo upload and the Pending component. */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Inline SVG icons (activity types, sync, brand) ─────────────────────── */

.at-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  flex-shrink: 0;
}

.sync-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Build provenance line rendered on the auth and settings pages.
 * Users compare the displayed commit + WASM hash against published
 * release notes to verify the served build matches audited source.
 * See SECURITY.md and BUILD.md. */
.build-info {
  margin-top: 2rem;
  font-size: 0.75rem;
  color: var(--text-subtle);
  text-align: center;
  word-break: break-all;
}

.build-info code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.build-info a {
  color: var(--text-muted);
  text-decoration: underline;
}